javascript - select dropdown not binding initially to AngularJS model -
ok issue have simple select dropdown, , using ng-repeat populate dropdown, below:
<select ng-model="tstctrl.model.value" required> <option ng-repeat="option in tstctrl.myoptions" value="{{option.a}}">{{option.b}}</option> </select>
after selecting option, binding model.value works fine, until doesn't seem bind selected dropdown option value model.value set to.
this demonstrated below:
<!doctype html> <html> <head> <script src="https://cdnjs.cloudflare.com/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 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 above snippet makes clear, happy answer questions.
how solve this?
thanks
if absolutely must use ng-repeat
, 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 agree others advised use ng-options
instead.
Comments
Post a Comment