angular select ng-selected 不工作（<option ng-repeat>）

Question

我花了一个小时尝试了所有可能的属性排列，将 select 作为对象绑定到模型，并且 ng-selected 什么也没做。

<select ng-model="localModel.priceType">
    <option 
            ng-repeat="item in vm.priceTypes"
            ng-selected="localModel.priceType == item"
            ng-value="item"
            >{{item.name}}</option>
</select>

或

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

或

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

select 列表正确呈现，选项值看起来很时髦，即 "object:875"。 selected 不起作用。

我需要 ng-model 作为对象，而不是 object.someId。

通过使用 ng-options 而不是

解决了这个问题

<select ng-model="localModel.priceType" ng-options="item as item.namefor item in vm.priceTypes track by item.name"></select>

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

尝试

<select ng-model="localModel.priceType">
  <option  ng-repeat="item in vm.priceTypes track by item.name"
           ng-value="item.name">
      {{item.name}}
  </option>
</select>

您可以将 ng-value 更改为您想要的 vm.priceTypes[0] 中的任何值。

Answer 2

ngValue 需要 ngValue 的字符串。要将 ngRepeat 与 <option> 标签一起使用，请使用 value="{{item}}" 而不是 ng-value。展开下面的代码片段以查看它是否正常工作。

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>

更简单的方法是在 <select> 标签上使用 ngOptions，并结合以下形式：

select as label for value in array track by expr

有关详细信息，请参阅 Usage 下 Arguments 部分中的 comprehension_expression 表格。

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>

angular select ng-selected 不工作（<option ng-repeat>）

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

javascript

angularjs

angularjs-ng-repeat

angularjs-ng-model