Bind enum values to ng-options angular js - javascript

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>

Related

why ng-change give "undefined" in angularjs?

Could you please tell me why ng-change give "undefined" in angularjs ?
$scope.onChangedCityDropDown= function(i){
console.log(i)
}
<select class="form-control" ng-model="a"
ng-options="item.city as item.city for item in vals"
ng-change="onChangedCityDropDown(item)">
<option value="" disabled>choose an option</option>
</select>
here is my code
https://plnkr.co/edit/HLLUcVnIl8ySg8baSMHv?p=preview
You can directly pass the ng-model value to the function,
<select class="form-control" ng-model="a" ng-options="item.city as item.city for item in vals" ng-change="onChangedCityDropDown(a)">
<option value="" disabled>choose an option</option>
</select>
just change onChangedCityDropDown(item) to onChangedCityDropDown(a)
see
ng-options doesn't work the same way as that of ng-repeat works. You won't get item value apart from ng-options attribute value. To make it work you should use ng-model(a) value inside ng-change callback function.
ng-change="onChangedCityDropDown(a)"
Also you want to set state based on city selection then change ng-options to below
ng-options="item.state as item.city for item in vals"
Demo Plunker
Just change your ng-options as below this will give you the object you are expecting.
ng-options="item as item.city for item in vals"
ng-change="onChangedCityDropDown(a)"
in ng-change you have to pass your ng-model
here is the working example
You can try like the below code for the city and the state reference selection and also please check this plunker link of your given working example.
Controller:
$scope.vals = [{
"city":"gurgaon",
"state":"Haryana"
}, {
"city":"Manesar",
"state":"Haryana"
}, {
"city":"Bangalore",
"state":"Karnataka"
}];
$scope.onChangedCityDropDown= function(i){
console.log(i)
}
$scope.onChangedStateDropDown= function(i){
console.log(i)
}
Template:
City
<select class="form-control" ng-model="city" ng-options="item.city as item.city for item in vals" ng-change="onChangedCityDropDown(city)">
<option value="" disabled>Select City</option>
</select>
State
<select class="form-control" ng-model="state" ng-options="item.state as item.state for item in vals | filter:{city:city}" ng-change="onChangedStateDropDown(state)">
<option value="" disabled>Select State</option>
</select>

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>

AngularJS ng-model definition for dropdown tree structure

I have a problem with my AngularJS application in which I have to chose the data from the dropdowns.
The problem is that when the first dropdown (brands) is changed the data must be injected only into second dropdown (models), not globally, to all the others second dropdowns - as shown in the jsfiddle.
JsFiddle
I know, that the problem is in the ng-model - how to should I define the ng-model?
<div ng-controller="MyCtrl">
<div ng-if="car" ng-repeat="car in cars">
<br><label>{{car.name}}</label><br>
<label>brand</label>
<select ng-model="car.brand" ng-options="car as car.name for car in brands" ng-change="loadBrands($index)">
<option value="">select</option>
</select>
<label>model</label>
<select ng-model="car.brand.model" ng-options="car as car.model for car in models">
<option value="">select</option>
</select>
<button ng-click="show($index)">show</button>
Thanks.
Instead of changing the $scope.models globally for all cars, you should update the models only for the selected Car:
JSFiddle with the following modifications:
$scope.loadBrands = function(index) {
if ($scope.cars[index].brand.name == 'audi') {
$scope.cars[index].models = $scope.audi;
} else {
$scope.cars[index].models = $scope.bmw;
}
}
and the select for the models should be changed to:
<select ng-model="brand.model" ng-options="car as car.model for car in cars[$index].models">
<option value="">select</option>
</select>

Why is my selected value not updated when copied from a controller?

I have a <select> that is controlled using both ng-model and ng-options:
<select ng-model="user.option"
ng-options="value.label for (key, value) in data.options">
<option value="">Select value</option>
</select>
The options are grouped in an object:
$scope.data.options = {
one: { label: 'one' },
two: { label: 'two' }
};
At some point, I want to change the selected option from the controller. This works:
$scope.user.option = $scope.data.options['two'];
However, in my context, I maintain a variable master, and use it to set $scope.user:
$scope.master.option = $scope.data.options['two'];
$scope.user = angular.copy ($scope.master);
This does not work: my <select> still shows Select value. But other elements properly reflect the change.
What am I doing wrong?
I created a fiddle there.
//Add track by in ng-options ..check below code
<div ng-app="my-app">
<div ng-controller="MyCtrl">
<select ng-model="user.option"
ng-options="value.label for (key, value) in data.options track by value.label">
<option value="">Select value</option>
</select>
<p>Selected: {{user.option.label}}
</div>
</div>

Angularjs select using ng-options

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

Categories