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

admin管理员组

文章数量:1026900

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>

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>

• javascript
• angularjs
• angularjs-ng-repeat
• angularjs-ng-model

Share Improve this question Follow edited Jul 21, 2017 at 15:55 Sonic Soul asked Jul 21, 2017 at 15:05 Sonic SoulSonic Soul 25k3939 gold badges136136 silver badges197197 bronze badges 2

• 2 Thats because you should be using ng-options with ng-model that contains a value from your array vm.priceTypes[0] docs.angularjs/api/ng/directive/ngOptions – 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 Commented Jul 21, 2017 at 15:50

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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./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 bination of forms:

select as label for value in array track by expr

Refer to the prehension_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./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>

https://docs.angularjs/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].

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>

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>

• javascript
• angularjs
• angularjs-ng-repeat
• angularjs-ng-model

Share Improve this question Follow edited Jul 21, 2017 at 15:55 Sonic Soul asked Jul 21, 2017 at 15:05 Sonic SoulSonic Soul 25k3939 gold badges136136 silver badges197197 bronze badges 2

• 2 Thats because you should be using ng-options with ng-model that contains a value from your array vm.priceTypes[0] docs.angularjs/api/ng/directive/ngOptions – 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 Commented Jul 21, 2017 at 15:50

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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./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 bination of forms:

select as label for value in array track by expr

Refer to the prehension_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./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>

https://docs.angularjs/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].

本文标签： javascriptangular select ngselected not working (with ltoption ngrepeatgt)Stack Overflow