angular select ng-selected not working (with <option ng-repeat>)

Question

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>

Thats because you should be using ng-options with ng-model that contains a value from your array vm.priceTypes[0] docs.angularjs.org/api/ng/directive/ngOptions — Marlon Barcarol
– Marlon Barcarol, Commented Jul 21, 2017 at 15:07
using ng-options directive instead of options with a repeat was the solution. still not sure why latter wouldn't work, but i won't lose sleep over it — Sonic Soul
– Sonic Soul, Commented Jul 21, 2017 at 15:50

Sᴀᴍ Onᴇᴌᴀ · Accepted Answer · 2017-07-21 18:16:32Z

3

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>

edited Jul 21, 2017 at 18:16

answered Jul 21, 2017 at 15:36

Sᴀᴍ Onᴇᴌᴀ

8,3028 gold badges38 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sonic Soul Over a year ago

thank you for creating a snippet! do you know why it only seems to work with ng-options?

Sᴀᴍ Onᴇᴌᴀ Over a year ago

I have updated the explanation - apparently ngValue expects a string, so working with an object won't work so well...

KTU · Accepted Answer · 2017-07-21 15:32:37Z

1

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].

answered Jul 21, 2017 at 15:32

KTU

4454 silver badges16 bronze badges

1 Comment

Sonic Soul Over a year ago

thank you, but this does the same thing as my initial example. it makes the select work, but not the selected property

Collectives™ on Stack Overflow

angular select ng-selected not working (with <option ng-repeat>)

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related