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填充下拉列表，但它不起作用。当我使用普通选择它工作正常，但ng-options无法使用多个选择下拉列表。请为此提供解决方案。

以下是JSON数据的示例：

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

Answer 1

鉴于您的代码和描述，您有一个有效的例子。这是一个演示：

＆＃13;

request.data.get('key', somedefault)

＆＃13;

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");
  }
});

＆＃13;

您可能有拼写错误，或者您忘记注入<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>等等。

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。

因此，您应该ng-options="item.Name for item in preSalesSpocData"

编辑：在回复评论时，这工作正常。请参阅JSFiddle example。

多个选择下拉列表无法使用ng-option

4 个答案: