Angularjs select using ng-options - javascript

i want to filter cities using states with 2 select inputes
when the first select change it value the second one should be changed according to the first select.
i have an array of items :
$scope.items = [
{
name:'state1',
cities : [
{id:1,name:'city1'},
{id:2,name:'city2'},
]
},
{
name:'state2',
cities : [
{id:1,name:'city1'},
{id:2,name:'city2'},
]
},
];
i tried this but its not working :
first for states :
<select ng-model="state" ng-options="s.id as s.name in states" ></select>
second for cities :
<select ng-model="city" ng-options="s.cities.id as s.cities.name for s in items | filter:{s.name:state}" ></select>

The first dropdown selects the whole country object. The options of the second dropdown are the cities of the selected country :
<select class="country" ng-model="selectedCountry" ng-options="country.name for country in items">
<option value="">Choose country</option>
</select>
<select ng-if="selectedCountry" class="city" ng-model="selectedCity" ng-options="city.name for city in selectedCountry.cities">
<option value="">Choose city</option>
</select>
Fiddle

Related

How to store selected value in ng-model if source list is array of objects?

I have array of objects like:
vm.items = [{id: "1", val: "a"},{id: "2", val: "b"},{id: "3", val: "c"}]
And I bound it to select option like:
<select ng-model="vm.model.id" >
<option value="">select somthing</option>
<option ng-repeat="i in vm.items" value="{{i.id}}">{{i.val}}</option>
</select>
But when I select some item from dropdown I get whole object {} and I want only id.
How can I do that?
You can use the ng-options directly on the select tag. If your json contains an id and name variable you can specify it as this:
<select ng-model="vm.model.id" ng-options="i.id as i.name for i in vm.items">
<option value="">select somthing</option>
</select>
The i.id is set to the options value and the i.name is set to the text
Use ng-model and ng-options in select to achieve this.
Inside controller.js
$scope.selectedItem = "";
Markup
<select ng-model="selectedItem " name="state"
ng-options="item.id as item.value for item in vm.items">
<option value="">select somthing</option>
</select>

Bind select with array of objects and display details when item is selected from select tag

I have an array
$scope.items= [
{ name: "Name1", email: "email1", password: "pas1" },
{ name: "Name2", email: "email2", password: "pas2" }
];
I want to display email value in a select tag. I am using following code but its not working. I want first item as 'Select' :
<select id="idItem">
<option value="-1" selected="selected">Select</option>
<option ng-repeat="o.email as o.email for o in items" value="{{o.email}}"> {{o.email}}
</option>
</select>
Also user can select multiple items. When user selects multiple emails from select box, message box should popup displaying Name and password of selected users.
<select id="idItem" >
<option value="-1" selected="selected">Select</option>
<option ng-repeat="item in items" value="{{item.email}}"> {{item.email}}
</option>
</select>
I think this would work....if it doesn't plz provide your plunkr url next time
I would prefer to use ng-options if you already have a json object containing all items. Further you need to use multiple="true" for multi-select and a ng-model to store the selected results
<select id="idItem" multiple="true" ng-model="selectedItems"
ng-options="item.email for item in items">
</select>
Then you can create a messageBox which displays the selectedItems if you want

Cannot load option values in select in angularjs

When search_dropdown values are set, using the selected value as the index need to set the value of filterText dropdown.
<div class="form-group" data-ng-repeat="filter in filtersArray track by $index">
<select name="search_dropdown"
ng-model="search_dropdown[filter]"
class="form-control">
<option value="">Select Filter Field</option>
<option data-ng-repeat="t in list_fields" value="{{t.field}}">{{t.displayName}}</option>
</select>
<select name="filterText" class="form-control" ng-model="filterText[filter]">
<option value="">Select Filter Text</option>
<option data-ng-repeat="t in list['{{search_dropdown[filter]}}'] track by $index" value="{{t}}">{{t}}</option>
</select>
search_dropdown = ['name','description'] and the value of
list['name'] = ['A','B'] and list['description'] = ['C','D'] where list is an object.
<option data-ng-repeat="t in list['{{search_dropdown[filter]}}']
track by $index" value="{{t}}">{{t}}</option>
Here how to set the value of filterText dropdown with A,B when name is selected in search_dropdown and C,D when description is selected?

Bind enum values to ng-options angular js

The response JSON from a http GET method is as shown below
[
{
"1": "Open"
},
{
"2": "Expired"
}
]
How to bind this data in a select drop down box in angular js.
I tried with this option:
<select class="form-control" ng-model="selected" ng-options="item for item in data">
<option value="">----Select----</option>
</select>
But I'm getting [object,object] in the drop down list.
You could transform the json data into the format expected by ng-options simply using Array.reduce, along the lines of
$scope.options = data.reduce(function(memo, obj) {
return angular.extend(memo, obj);
}, {});
<select ng-model="selected" ng-options="key as val for (key, val) in options"></select>
Full example here http://plnkr.co/edit/PV4BYrz0KBkIFPWVzVaT?p=preview
you need a key,value in ng-repeat syntax as you have unknown or different keys
And you have to keep track of two repeats first for array and then for keys inside the objects
<select class="form-control" ng-model="selected" >
<option value="">----Select----</option>
<optgroup ng-repeat="v in values">
<option ng-repeat='(key,value) in v' value="{{key}}">{{value}}</option>
</optgroup>
</select>
Demo
value in option will be "open" or "expired" you can change it to keys "0" or "1" if you replace value={{value}} with value="{{key}}"
app = angular.module('test',[]);
app.controller('testctrl',function($scope){
$scope.values =[{"1": "Open" },{"2": "Expired" }];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="testctrl" ng-app="test">
<span ng-if="selectedModel">{{selectedModel}}</span>
<select class="form-control" ng-model="selectedModel">
<option>----Select----</option>
<optgroup ng-repeat="v in values">
<option ng-repeat='(key,value) in v' value="{{value}}">{{value}}</option>
</optgroup>
</select>
</div>

AngularJS <select> not saving value in object?

I have this select element in a row (of which there can be a few) which represents an item. But the scope for manufacturer does not update when this is selected. The default for the item's manufacturer attribute is null (since when it's created - it no manufacturer has been selected yet)
<select ng-model="manufacturer" ng-options="manufacturers.name for manufacturers in manufacturers" ng-change="change()" class="ng-valid ng-dirty">
<option value="" selected="selected" class=""> --Select a Manufacturer--</option>
<option value="0">Choice1</option>
<option value="1">Choice2</option>
<option value="2">Choice3</option>
</select>
I guess my question is - how do I get the manufacturer attribute in the item to update with the select box?
Thanks!
If it helps - here's the scope of the cams item:
$scope.cams = [
{channels:1, manufacturer:null},
{channels:1, manufacturer:null}
];
Turns out ng-model="manufacturer" should have been ng-model="cam.manufacturer":
<select ng-model="cam.manufacturer" ng-options="manufacturers.name for manufacturers in manufacturers" ng-change="change()" class="ng-valid ng-dirty">
<option value="" selected="selected" class=""> --Select a Manufacturer--</option>
<option value="0">Choice1</option>
<option value="1">Choice2</option>
<option value="2">Choice3</option>
</select>
Now it works perfectly.
You could use this:
HTML
<selectmultiple ng-model="selectedValues">
<option ng-repeat="lang inLanguages" value="{{lang.name}}" ng-click="selected(selectedValues)">{{lang.name}}</option>
</select>
angularjs:
$scope.selected = function(nowSelected){
$scope.selectedValues = [];
if( ! nowSelected ){
return;
}
angular.forEach(nowSelected, function(val){
$scope.selectedValues.push(val);
});
};

Categories