I've spent an hour and tried every conceivable permutation of properties to bind a select to a model as object, and ng-selected does nothing.
<select ng-model="localModel.priceType">
<option
ng-repeat="item in vm.priceTypes"
ng-selected="localModel.priceType == item"
ng-value="item"
>{{item.name}}</option>
</select>
or
<select ng-model="localModel.priceType">
<option
ng-repeat="item in vm.priceTypes"
ng-selected="localModel.priceType.id == item.id"
ng-value="item"
>{{item.name}}</option>
</select>
or
<select ng-model="localModel.priceType">
<option
ng-repeat="item in vm.priceTypes track by item.name"
ng-selected="localModel.priceType.name == item.name"
ng-value="item"
>{{item.name}}</option>
</select>
The select list renders correctly, option values look funky i.e "object:875". and selected does not work.
I need ng-model to be the object, not object.someId.
solved this by using ng-options instead of <option> ng-repat
<select ng-model="localModel.priceType" ng-options="item as item.namefor item in vm.priceTypes track by item.name"></select>
ngValue expects a string for the ngValue. To use ngRepeat with the <option> tag, then use value="{{item}}" instead of ng-value. Expand the snippet below to see it working.
angular.module('myApp', [])
.controller('ctrl', function($scope) {
$scope.vm = {
priceTypes: [{
id: 3,
name: 'pound'
},
{
id: 5,
name: 'Yen'
},
{
id: 6,
name: 'dollar'
}
]
};
//select model value
$scope.localModel = {
priceType: $scope.vm.priceTypes[1]
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ctrl">
<select ng-model="localModel.priceType">
<option
ng-repeat="item in vm.priceTypes as item"
ng-selected="localModel.priceType.id == item.id"
value="{{item}}"
>{{item.name}}</option>
</select>
<div>
priceType: {{ localModel.priceType }}
</div>
</div>
A simpler approach is to use ngOptions on the <select> tag, with a combination of forms:
select as label for value in array track by expr
Refer to the comprehension_expression forms in the Arguments section under Usage for more information.
angular.module('myApp', [])
.controller('ctrl', function($scope) {
$scope.vm = {
priceTypes: [{
id: 3,
name: 'pound'
},
{
id: 5,
name: 'Yen'
},
{
id: 6,
name: 'dollar'
}
]
};
//select model value
$scope.localModel = {
priceType: $scope.vm.priceTypes[1]
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ctrl">
<select ng-model="localModel.priceType" ng-options="item as item.name for item in vm.priceTypes track by item.name">
</select>
<div>
priceType: {{ localModel.priceType }}
</div>
</div>
https://docs.angularjs.org/api/ng/directive/ngSelected
ngSelected does not interact with the select and ngModel
directives, it only sets the selected attribute on the element. If you
are using ngModel on the select, you should not use ngSelected on the
options, as ngModel will set the select value and selected options.
Try
<select ng-model="localModel.priceType">
<option ng-repeat="item in vm.priceTypes track by item.name"
ng-value="item.name">
{{item.name}}
</option>
</select>
You can change ng-value to any value you want from vm.priceTypes[0].
Related
This works in perfect javascript
document.getElementById("mySelect").selectedIndex = "0"
<select class="selectpicker" id="mySelect">
<option>English </option>
<option>Español </option>
</select>
How do you do this same but in Angularjs
app.controller("BodyController",function($scope){
/****************codeeeeeeeeeeeeeeeeeeeeeeeeee*/
});
One way is to add the ng-model attribute to the select tag, and then set the value of the matching variable in the scope (corresponding to the scope set in the controller). See the example below - bear in mind that value attribute were added to the options. And like tymeJV mentioned, ngOptions would typically be used in an angular application to set the option nodes inside the select tag (see the second example below).
angular.module('app',[])
.controller("BodyController",function($scope){
//set the model value to 'en', so the select list will select the option with value=='en'
$scope.lang = 'en';
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="BodyController">
<select class="selectpicker" id="mySelect" ng-model="lang">
<option value="en">English </option>
<option value="es">Español </option>
</select>
</div>
Using ngOptions:
angular.module('app',[])
.controller("BodyController",function($scope){
//set the model value to 'en', so the select list will select the option with value=='en'
$scope.lang = {name: 'English', id: 'en'};
$scope.langs = [
{name: 'English', id: 'en'},
{name: 'Español', id: 'es'}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="BodyController">
<select class="selectpicker" id="mySelect" ng-model="lang" ng-options="lang.name for lang in langs track by lang.id">
</select>
</div>
I have an annoying issue with an app that has an Angular-based frontend. A certain select box is "sticky" - you have to select an option twice to change to it. Here's a snippet which reproduces the issue:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script>
var app = angular.module('myapp', []);
app.controller('NewsCtrl', function($scope) {
// Set news data
$scope.news = {
specific_for_dealership: '003'
};
// Get dealers
$scope.dealers = [{
id: 1,
dealerid: '001',
name: 'Volvo'
}, {
id: 2,
dealerid: '002',
name: 'Saab'
}, {
id: 3,
dealerid: '003',
name: 'Seat'
}];
});
</script>
<div ng-app="myapp">
<div ng-controller="NewsCtrl">
<form>
<select name="specific_for_dealership" ng-model="news.specific_for_dealership">
<option value="">All</option>
<option ng-repeat="dealer in dealers" ng-selected="news.specific_for_dealership" value="{{ dealer.dealerid }}">{{ dealer.name }}</option>
</select>
</form>
</div>
</div>
Any idea what has gone wrong and how I might resolve this?
You do not need to use ng-selected to select your option, ng-model does that for you.
It is causing the model to get confused. Which is why you have to select it twice.
<select name="specific_for_dealership" ng-model="news.specific_for_dealership">
<option value="">All</option>
<option ng-repeat="dealer in dealers" value="{{ dealer.dealerid }}">{{ dealer.name }}</option>
</select>
Something else I would personally recommend as well is switching to ng-options to display your options list from the object. It will give you some more versatility. For example you can bind the whole object to the selector instead of just the ID.
<select name="specific_for_dealership"
ng-options="dealer.dealerid as dealer.name for dealer in dealers"
ng-model="news.specific_for_dealership">
<option value="">All</option>
</select>
Just set ng-selected="dealer.dealerid === news.specific_for_dealership"
I have a form that repeat select option in ng-repeat. in this form i want to selected defualt value for select element. In fact in first select element selected value is "n1" and in second select element selected value is "n2". while in tow select element defualt value is "n2".
what is my problem?
function MyCntrl($scope) {
$scope.data = {
orders: [{ s:'' }]
};
$scope.list = [1,2];
$scope.data.orders[0] = "n1";
$scope.data.orders[1] = "n2";
$scope.sizes = [ {code: 1, name: 'n1'}, {code: 2, name: 'n2'}];
$scope.update = function() {
console.log($scope.item.code, $scope.item.name)
}
}
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyCntrl">
<div ng-repeat="l in list track by $index">
<select ng-model="data.orders[$index]" ng-change="update()">
<option ng-selected ="data.orders[$index] == size.name" ng-repeat="size in sizes">
{{size.name}}
</option>
</select>
</div>
<select ng-model="data.orders[0]" ng-change="update()">
<option ng-selected ="data.orders[0] == size.name" ng-repeat="size in sizes">
{{size.name}}
</option>
</select>
<select ng-model="data.orders[1]" ng-change="update()">
<option ng-selected ="data.orders[1] == size.name" ng-repeat="size in sizes">
{{size.name}}
</option>
</select>
</div>
</body>
</html>
Try this code instead. It uses $parent.$index instead of $index.
ng-repeat tracks by $index by default, so there's no need to specify it.
This causes a problem in your inner loop, which is also tracking by $index. When you say $index in the inner loop it picks up the inner loops index which is always going to evaluate to true.
function MyCntrl($scope) {
$scope.data = {
orders:[{ s:'' }]
};
$scope.list = [1,2];
$scope.data.orders[0] = "n1";
$scope.data.orders[1] = "n2";
$scope.sizes = [{code: 1, name: 'n1'}, {code: 2, name: 'n2'}];
$scope.update = function() {
console.log($scope.item.code, $scope.item.name)
}
}
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyCntrl">
<div ng-repeat="l in list track by $index">
<select ng-model="data.orders[$index]" ng-change="update()">
<option ng-selected ="data.orders[$parent.$index] == size.name" ng-repeat="size in sizes">
{{size.name}}
</option>
</select>
</div>
</div>
</body>
</html>
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>
I need to use ng-repeat with the options within a Select menu like so
<select name="category" id="category" ng-model="rumor.category" validation-pattern="requiredOnly" error-icon>
<option ng-repeat="cat in formOptions.categories" value="{{ cat }}" >{{ cat }}</option>
</select>
However on rendering my select is empty and when inspecting the console I see the following:
<select id="category" class="ng-scope ng-pristine ng-invalid ng-invalid-required" ng-model="rumor.category" name="category" required="required">
<option value="? undefined:undefined ?"></option>
</select>
Now I know I should really use ng-options on the select menu however I wish to include angular-ui / ui-select2 which is incompatable with ng-options and the documentation recomends using a repeater (see https://github.com/angular-ui/ui-select2)
When I use the same repeater on a different tag, for example:
<p ng-repeat="cat in formOptions.categories" value="{{ cat }}" >{{ cat }}</p>
the repeater works as expected. Any ideas why this is?
Thanks in advance.
You shouldn't use ng-repeat for select options. Use ng-options (link) instead:
<select name="category"
id="category"
ng-model="rumor.category"
validation-pattern="requiredOnly"
error-icon
ng-options="c.cat for c in formOptions.categories">
</select>
You can use select option with ng-repeat.
JS:
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.categories = [ {'cat' : '1'}, {'cat' : '2'}, {'cat' : '3'}, {'cat' : '4'}] ;
}
HTML:
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<select ng-model="item.value">
<option ng-repeat="cat in categories" value="{{cat.cat}}">{{cat.cat}}</option>
</select>
</div>
</div>
You can also fiddle: http://jsfiddle.net/usmanfaisal/vHw7N/