Ok so my issue is that I have a simple select dropdown, and am using ng-repeat to populate the dropdown, like below:
<select ng-model="tstCtrl.model.value" required>
<option ng-repeat="option in tstCtrl.myOptions" value="{{option.a}}">{{option.b}}</option>
</select>
After selecting an option, the binding to model.value works fine, but until then it doesn't seem to bind the selected dropdown option to the value model.value is initially set to.
This is demonstrated below:
<!DOCTYPE html>
<html>
<head>
<script src=".js/1.4.6/angular.min.js"></script>
<script>
angular.module('Test', []).controller('TestController', function(){
this.model = {
value:3
};
this.myOptions = [
{a:1, b:"one"},
{a:2, b:"two"},
{a:3, b:"three"},
{a:4, b:"four"},
{a:5, b:"five"}];
});
</script>
</head>
<body ng-app="Test" ng-controller="TestController as tstCtrl">
{{tstCtrl.model.value}}
<select ng-model="tstCtrl.model.value" required>
<option ng-repeat="option in tstCtrl.myOptions" value="{{option.a}}">{{option.b}}</option>
</select>
</body>
</html>Ok so my issue is that I have a simple select dropdown, and am using ng-repeat to populate the dropdown, like below:
<select ng-model="tstCtrl.model.value" required>
<option ng-repeat="option in tstCtrl.myOptions" value="{{option.a}}">{{option.b}}</option>
</select>
After selecting an option, the binding to model.value works fine, but until then it doesn't seem to bind the selected dropdown option to the value model.value is initially set to.
This is demonstrated below:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare./ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
angular.module('Test', []).controller('TestController', function(){
this.model = {
value:3
};
this.myOptions = [
{a:1, b:"one"},
{a:2, b:"two"},
{a:3, b:"three"},
{a:4, b:"four"},
{a:5, b:"five"}];
});
</script>
</head>
<body ng-app="Test" ng-controller="TestController as tstCtrl">
{{tstCtrl.model.value}}
<select ng-model="tstCtrl.model.value" required>
<option ng-repeat="option in tstCtrl.myOptions" value="{{option.a}}">{{option.b}}</option>
</select>
</body>
</html>I think the above snippet makes it really clear, but am happy to answer any questions.
How do I solve this?
Thanks
Share asked Sep 30, 2015 at 16:59 JMKJMK 28.1k55 gold badges172 silver badges290 bronze badges 4- 2 Is there a reason you use ng-repeat instead of ng-options? – venerik Commented Sep 30, 2015 at 17:03
- Only because I prefer it syntactically, will it work with ng-options do you think? – JMK Commented Sep 30, 2015 at 17:04
- I do think so, the example in the documentation sets a default. If you want to stick to your approach: stackoverflow./questions/18194255/… – venerik Commented Sep 30, 2015 at 17:06
- 1 It works: jsfiddle/khjdgk82 – michelem Commented Sep 30, 2015 at 17:14
4 Answers
Reset to default 4I suggest you use the ng-options syntax instead of an ng-repeat inside your select. If you want to display property b but bind to property a you can use the following syntax:
<select ng-model="model.value" ng-options="option.a as option.b for option in myOptions" required>
</select>
Here's your modified working snippet:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare./ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
angular.module('Test', []).controller('TestController', function($scope){
$scope.model = {
value:3
};
$scope.myOptions = [
{a:1, b:"one"},
{a:2, b:"two"},
{a:3, b:"three"},
{a:4, b:"four"},
{a:5, b:"five"}];
});
</script>
</head>
<body ng-app="Test" ng-controller="TestController">
{{model.value}}
<select ng-model="model.value" ng-options="option.a as option.b for option in myOptions" required>
</select>
</body>
</html>If you absolutely must use ng-repeat, you could do it like this:
<select ng-model="tstCtrl.model.value">
<option ng-repeat="option in tstCtrl.myOptions" value="{{option.a}}"
ng-selected="tstCtrl.model.value==option.a">
{{option.b}}
</option>
</select>
but I agree with the others who advised to use ng-options instead.
Theres a known issue with going from AngularJS 1.3.x to 1.4, specifically with ng-model and select dropdowns. In short, the Angular documentation was updated and they gave the more proper way to fix this issue:
app.directive('convertToNumber', function() {
return {
require: 'ngModel',
link: function (scope, element, attrs, ngModel) {
ngModel.$parsers.push(function(val) {
return parseInt(val, 10);
});
ngModel.$formatters.push(function (val) {
return '' + val;
});
}
};
});
And in your select dropdown, add the directive:
<select ng-model="tstCtrl.model.value" convert-to-number required>
<option ng-repeat="option in tstCtrl.myOptions" value="{{option.a}}">{{option.b}}</option>
</select>
Here is the reference URL where the above solution originated from:
http://weblog.west-wind./posts/2015/May/21/Angular-Select-List-Value-not-binding-with-Static-Values
Just need ng-options instead of ng-repeat like this:
ng-options="option.a as option.b for option in myOptions"