Menu
I'm trying to set ng-selected in my option element, selected attribute is set to true, but option not selected, When I remove ng-model from select all become working.
The question: How to make option selected, when I'm using the model?
Here is my plunker (selected not working here)
My code:
var app = angular.module("plunker", []);
app.controller("TestController", ["$scope", function($scope) {
$scope.test = 1;
$scope.array = [
{"id": 1, "name": "first"},
{"id": 2, "name": "second"},
{"id": 3, "name": "third"}
];
}]);
My template:
<body ng-controller="TestController">
Selected item must be {{ array[test-1].name }}
<select ng-model="myModel">
<option value="">Choose item..</option>
<option ng-repeat="item in array"
ng-value="item.id"
ng-selected="item.id == test">
{{ item.name }} ({{item.id == test}})
</option>
</select>
</body>
Thanks a lot for any help!
523
But ng-repeat is not the right thing to use when you have large datasets as it involves heavy DOM manipulations. And you should consider using ng-repeat with pagination. You can consider using transclusion inside a custom directive, to achieve the behavior you are looking for without using ng-repeat.
The ng-selected directive sets the selected attribute of an <option> element in a <select> list. The option will be selected if the expression inside the ng-selected attribute returns true. The ng-selected directive is necessary to be able to shift the value between true and false .
ngModel usually use for input tags for bind a variable that we can change variable from controller and html page but ngBind use for display a variable in html page and we can change variable just from controller and html just show variable. Save this answer.
ng-options is the directive which is designed specifically to populate the items of a dropdown list. One major advantage using ng-options for the dropdown is, it allows us to pass the selected value to be an object. Whereas, using ng-repeat the selected value can only be string.
Don't use ngSelected with ngRepeat. Go with ngOptions:
<body ng-controller="TestController">
Selected item must be {{ array[test-1].name }}
<select ng-model="myModel" ng-options="item.id as item.name for item in array">
<option value="">Choose item..</option>
</select>
</body>
ngSelected with ngModel
From the Docs:
Note:
ngSelecteddoes not interact with the<select>andngModeldirectives, it only sets the selected attribute on the element. If you are usingngModelon the select, you should not usengSelectedon the options, asngModelwill set the select value and selected options.— AngularJS ng-selected API Reference
See additional Docs:
ng-repeat to generate select optionsng-options and setting a default valueSee Stackoverflow:
ng-repeat to generate select options (with Demo)
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
