角度選擇ng選擇不起作用 <option ng-repeat> ）

Question

我花了一個小時，嘗試了所有可能的屬性排列，以將選擇綁定到對象作為模型，而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>

選擇列表正確呈現，選項值看起來很時髦，即“ object：875”。 並且選擇不起作用。

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

通過使用ng-options代替<option> ng-repat解決了這個問題

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

Answer 1

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

有關更多信息，請參考“ 用法 ”下“ 參數”部分中的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> 

Answer 2

https://docs.angularjs.org/api/ng/directive/ng已選擇

ngSelected不會與select和ngModel指令交互，它僅在元素上設置selected屬性。 如果在選擇上使用ngModel ，則不應在選項上使用ngSelected ，因為ngModel將設置選擇值和所選選項。

嘗試

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

您可以從vm.priceTypes[0]將ng-value更改為所需的任何值。