So I have a mongodb database that will house several department names. I want to http.get() the names from my nodejs server. From that get, I want to populate the names into a select box. The important part of this question isn't the node/mongo part, its the js/html part of, I have the response from the get, how do I put it into a select box? Here is my code:
The part of code:
$http.get('http://localhost:8000/getData').then(function(response) {
// code to place here
});
And the html part:
<select placeholder="Select a User">
<option ng-model="selectUser"></option>
</select>
First, you have to put the data from the response object into a controller property like this:
$http.get('http://localhost:8000/getData').then(function(response) {
$scope.options = response.data;
});
And then you can use the ng-options directive from angular to populate the select box with values like this:
<select placeholder="Select a User" ng-model="selectUser" data-ng-options="option.Member for option in options">
</select>
Somthing like:
$scope.values; //values from server
$http.get('http://localhost:8000/getData').then(function(response) {
console.log(response.data); //make sure that this is what you are looking for
$scope.values = response.data;
});
<select placeholder="Select a User" data-ng-options="option.name for option in values">
</select>
Related
I am displaying records from Database in Selectbox (select2). Like this
<select name="comic_publisher" id="publishers">
#foreach($group as $team)
<option value="{{$team->comic_group_name}}">{{$team->comic_group_name}}</option>
#endforeach
</select>
Here I have to do such functionality like if I select name from selectbox then selected record's id means(team->id) automatically save in a hidden field. so I can save that into table. I am stuck and don't know how to do that with laravel.
and Here is the Controller function:-
public function create()
{
$group = Group::all(['comic_group_name']);
return View('comic.create', compact('group',$group));
}
Any help from experts.
Thanks.
If I understood it well just pass model id to option value, like this:
<option value="{{ $team->id }}">
{{$team->comic_group_name}}
</option>
I want to add smart search to the dropdown in grails angularjs application. Does any one know how I can do that ? I get the data for the list from a table through MySQL.
I use ng-model and ng-option. I use the following code.
<select class="something" id="filter.customer.id" name="filter.customer.id"
ng-model="ctrl.customer"
ng-option="ctrl.customer"
<option value=""><{something}</option>
</select>
You can add a filter to a ng-options.
Here I created an input to search a customer ID. The data in the select will be filtered from this value.
<input type="text" ng-model="search"></input>
<select ng-model="selectedCustomer" ng-options="c as c.id for c in customers | filter: {id: search}"></select>
Check this demo application example
I am new to Angular and Mongo, and am hoping to use Angular js to pull data from a Mongo database to populate a div on a single-page website I'm building. What data is pulled will depend on what option a user selects in a dropdown option on a form. There are a Lot of options out there for Angular, and I was hoping that someone with more experience with it could point me in the right direction. Below are the relevant bits of my code:
<body ng-app="">
<div id='ad'> </div><!-- to be populated with data from MongoDB -->
<select id='climateZone' ng-model="zone" >
<option value="z3">3</option>
<option value="z4">4</option>
<option value="z5">5</option>
<option value="z6">6</option>
<option value="z7">7</option>
<option value="z8">8</option>
<option value="z9">9</option>
<option value="z10">10</option>
</select>
<button id='Go'><h2>Go!</h2></button>
I want it so that when a user selects one of these options, and presses the 'go' button, the 'ad' div will be populated with option-specific information from the database.
I hope that's all clear; any help is appreciated!
As far as I know you can't make HTTP request directly to MongoDB. Instead you need a server-side implementation that communicates with the database for you. If you are using Node for the back-end you can take a look on Mongoose: http://mongoosejs.com/
Mongoose is one of the many libs for MongoDB, you define you models, make queries, post data, and so on. Let's say I want to get the data based on a parameter. At first you need a model for your data:
var Cat = mongoose.model('Cat', { name: String });
Then you can start operating on top of the DB connection. The example bellow should bring you all cats named "Toddy":
var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/myDB');
Cat.find({name: 'Toddy'}, function (err, result) {
if (err) return console.error(err);
console.log(result);
});
That said, you can use the ngChange and ngModel directives to put the value of the combo on a variable and react properly when it changes, like so:
<select id='climateZone' ng-model="zone" ng-change="loadData()">
<option value="z3">3</option>
<option value="z4">4</option>
<option value="z5">5</option>
<option value="z6">6</option>
<option value="z7">7</option>
<option value="z8">8</option>
<option value="z9">9</option>
<option value="z10">10</option>
</select>
Being both "zone" and "loadData()" members of your $scope.
When a user logs in to my app, it loads the previous UI setup that they were using. To switch between interfaces there is a dropdown that lists all the options that specific user is authorized to use.
I would like the selected option in that list to reflect the previous UI when the page is loading but I'm having trouble coming up with how to set the selected <option>
Here is some example code:
//User object from DB
var user = {
username: admin,
previousUI: 'Build',
authorizedUI: [{title:'Default'}, {title:'Edit'}, {title:'Build'}]
}
html:
<form class="navbar-form">
<label>System: </label>
<select (change)="systemSelect($event.target.value)">
<option *ngFor="let system of user.authorizedUI" [value]="system.title">
{{system.title}}
</option>
</select>
</form>
In Angular2 how do I set the selected parameter on the option to reflect user.previousUI?
I tried adding this:
<option *ngFor="let system of user.authorizedUI" [value]="system.title" [selected]="system.title === user.previousUI">
But that didn't seem to do it.
One way would be
<select [ngModel]="user?.previousUI" (change)="systemSelect($event.target.value)">
I am trying to get the value that user selects from my dropdown.
I have
<select ng-model="item" ng-change="vm.getItem()">
<option value="discount">Discount</option>
<option value="{{::item}}"
ng-repeat="item in vm.items"
ng-bind="item.name"
</option>
</select>
In my controller
vm.getItem = function() {
vm.pickedItem = //not sure what to do...
//I need to get the select item
//please noted that the discount is a stand alone option value. I need to get
//that too if user selects it.
}
I don't want to use ng-option as it has some restriction that I don't need. I was hoping to get it from just regular <option> tag.
Thanks for the help!
I would recommend you to use ngOptions
Set up select element with proper model i.e. vm.pickedItem which can be directly used in controller, or you can pass it to your method like vm.getItem(vm.pickedItem)
<select ng-model="vm.pickedItem" ng-change="vm.getItem(vm.pickedItem )">
<option value="discount">Discount</option>
<option value="{{::item}}"
ng-repeat="item in vm.items"
ng-bind="item.name">
</option>
</select>
vm.getItem = function() {
var selectedItem = vm.item;
////vm.item is the bound variable to the dropdown's ng-model directive
}
If you really wanted to use the ng-change event in this scenario, then on your "getItem" event, you should access the model bound to the dropdown's ng-model called "item" as seen in your html markup.
you forgetting to alis your controller in your select
<select ng-model="vm.item" ng-change="vm.getItem()">
In controller
vm.getItem = function() {
console.log(vm.item)
or
console.log(this.item)
}