Angular 如何选择多个

Question

我有这个对象数组。里面有这样的东西。

[
    {
        id: 1,
        name: "Extra Cheese"
    },
    {
        id: 2,
        name: "No Cheese"
    }
]

我正在遍历这里的数组

<select ng-model="item.modifiers" multiple chosen class="chosen-select" tabindex="4" ng-options="modifier._id as modifier.name for modifier in modifiers"></select>

事物 item.modifiers 具有这 2 个 id 数组的模型

[
    1,2
]

我希望 multi select 自动 selected item.model

中的两个 ID

我希望最终结果看起来像这样

Answer 1

如果我对问题的理解正确，你想预先 select 这两个选项。

为此，您需要将 ng-model 设置为指向您正在迭代的实际对象。

您还需要将 ng-options 更改为 ng-options="modifier as modifier.name for modifier in modifiers"，而不是仅仅遍历 ID。

这是复杂模型（对象或集合）下的相关文档 https://docs.angularjs.org/api/ng/directive/ngOptions

像这样的东西应该可以工作：

HTML:

<select ng-model="$ctrl.item.modifiers"
  ng-options="modifier as modifier.name for modifier in $ctrl.modifiers"
  multiple chosen class="chosen-select" tabindex="4" >
</select>

JS:

app.controller("my-controller", function() {
    var $ctrl = this;

    $ctrl.modifiers = [{
      id: 1,
      name: "Extra Cheese"
    }, {
      id: 2,
      name: "No Cheese"
    }];

    $ctrl.item = {
      modifiers: []
    }

  $ctrl.$onInit = function() {
    const id1 = 1;
    const id2 = 2;
    for (const modifier of $ctrl.modifiers) {
      if (modifier.id === id1 || modifier.id === id2) {
        $ctrl.item.modifiers.push(modifier);
      }
    }
  }
}

这是显示结果的笔： http://codepen.io/Lahikainen/pen/WooaEx

希望对您有所帮助...

Answer 2

您的代码已经可以正常工作了，也许某些变量没有正确分配（例如 id 而不是 _id）

angular.module('test', []).controller('Test', Test);

function Test($scope) {
  $scope.modifiers = [
    {
        id: 1,
        name: "Extra Cheese"
    },
    {
        id: 2,
        name: "No Cheese"
    }
  ]
  
  $scope.item = {};
  
  // add this for pre-selecting both options
  $scope.item.modifiers = [1,2];
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app='test' ng-controller='Test'>
  <select ng-model="item.modifiers" multiple chosen class="chosen-select" tabindex="4" ng-options="modifier.id as modifier.name for modifier in modifiers"></select>
</div>

Angular 如何选择多个

Angular how to have multiple selected

multi-select

angularjs

angular-ui-bootstrap