多選下拉菜單不適用於ng-option

Question

<select class="selectpicker" name="productName" ng-model="productName"
        style="width:250px" ng-options="x.name for x in preSalesSpocData"
        ng-change="getVersionsForProduct()">
  <option value="" selected="selected">Please Select Option</option>
</select>

在這里，我有一個preSalesSpocData JSON對象，我正在嘗試使用ng-options填充下拉列表，但是它不起作用。 當我使用normal select時，它工作正常，但是ng-options與多選下拉列表不兼容。 請為此提供解決方案。

這是JSON數據的示例：

$rootScope.preSalesSpocData = [
  { Id: 1, Name: 'Apple' }, 
  { Id: 2, Name: 'Mango' }, 
  { Id: 3, Name: 'Orange' }
];

Answer 1

給定您的代碼和說明，您將有一個有效的示例。 這是一個演示：

 var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $rootScope) { $rootScope.preSalesSpocData = [{ Id: 1, Name: 'Apple' }, { Id: 2, Name: 'Mango' }, { Id: 3, Name: 'Orange' }]; $scope.getVersionsForProduct = function() { console.log("getVersionsForProduct called"); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> <select multiple class="selectpicker" name="productName" ng-model="productName" style="width:250px" ng-options="x.Name for x in preSalesSpocData" ng-change="getVersionsForProduct()"> <option value="" selected="selected">Please Select Option</option> </select> <pre>{{productName | json}}</pre> </div> 

您可能輸入有誤，或者忘記注入$rootScope等。

Answer 2

嘗試： item as x.Name

<select class="selectpicker" name="productName" ng-model="productName"  style="width:250px"ng-options="item as x.Name for item in preSalesSpocData" ng-change="getVersionsForProduct()">
  <option value="" selected="selected">Please Select Option</option>
</select>

Answer 3

請像下面添加多個ng-model並檢查

例

<select  ng-model="empInfo1" >
<select  ng-model="empInfo2" >

Answer 4

您的ng-options應該遵循element.property for element in listOfElements語法element.property for element in listOfElements 。

因此， ng-options="item.Name for item in preSalesSpocData"應具有ng-options="item.Name for item in preSalesSpocData"

編輯 ：回復評論，這很好。 參見JSFiddle示例 。