CODEWITHSUNDEEP
angularjsangularjs-ng-model
Sergio Ivanuzzo
Sergio Ivanuzzo

Reputation: 1922

AngularJS. When select have ng-model attribute, ng-selected not working

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!

Upvotes: 7

Views: 4290

Answers (2)

georgeawg
georgeawg

Reputation: 48968

Don't use ngSelected with ngModel

From the Docs:

Note: 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.

— AngularJS ng-selected API Reference

See additional Docs:

See Stackoverflow:

Upvotes: 2

dfsq
dfsq

Reputation: 193261

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>

Upvotes: 7

Related Questions