多选下拉菜单不适用于 ng-option答案

【问题标题】：Multiple select dropdown not working with ng-option多选下拉菜单不适用于 ng-option
【发布时间】：2018-05-30 19:43:21
【问题描述】：

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

这里我有一个 JSON 对象，它是 preSalesSpocData，我正在尝试使用 ng-options 填充下拉列表，但它不起作用。当我使用普通选择时，它工作正常，但ng-options 不适用于多选下拉菜单。请为此提供解决方案。

这是 JSON 数据的示例：

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

【问题讨论】：

能否提供 JSON 结构的示例？
$rootScope.preSalesSpocData = [{ ID：1，名称：'Apple'}，{ ID：2，名称：'Mango'}，{ ID：3，名称：'Orange'}] ; });
以上是示例json数据。
您正在选择 x.name，但您的 JSON 具有 Name 属性
我也试过 x.Name。不工作。

标签： html angularjs bootstrap-4

【解决方案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等。

【讨论】：

我希望它是一个多选下拉菜单。
@nishantsingh 只需将multiple 属性添加到您的<select> 标签

【解决方案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>

【讨论】：

【解决方案3】：

请在下面添加多个 ng-model 并检查

例子

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

【讨论】：

这也行不通，因为我们的代码中已经有 ng-model。

【解决方案4】：

您的 ng-options 应遵循语法 element.property for element in listOfElements。

因此你应该有ng-options="item.Name for item in preSalesSpocData"

编辑：回复评论，这工作得很好。见JSFiddle example。

【讨论】：

同样的方式，preSalesSpocData 中 x 的 x.Name