AngularJS 使用 selectize 和 ng-repeat 设置多选下拉列表的值答案

【问题标题】：AngularJS set values of multi-select drop-down using selectize and ng-repeatAngularJS 使用 selectize 和 ng-repeat 设置多选下拉列表的值
【发布时间】：2018-10-05 06:08:34
【问题描述】：

通过这个例子（JS Bin of pure html select tag）我可以实现纯html的多选。

但我正在使用 selectize 插件
https://selectize.github.io/selectize.js/
对于下拉多选，我很困惑如何填充已选择的值。？

这是我尝试过的我的HTML：

<div ng-repeat="item in items">

<select  
multiple 
class="selectSkill"
ng-model="item.storedArray"
ng-options="opt.skillId as opt.skillName for opt in skills"
></select>

</div>

我的客户：

$scope.$selectSkill= $('.selectSkill').selectize({
    valueField: 'skillId',
    labelField: 'skillName',
    searchField: 'skillName',
    maxItems: 5,
    placeholder:"Select Skill",
    options: $scope.skills,
    create: false,
    sortField: {
        field: 'skillName',
        direction: 'asc'
    }
});
$scope.selectizeControlSkills = $scope.$selectSkill[0].selectize;

我正在加载基于类的选择（selectSkill）。

没有填充正常负载正在工作，但我正在尝试使用 selectize 动态设置值。

感谢您的帮助。

我的演示数据：

**$scope.skills**

**item.storedArray**

【问题讨论】：

如果你打算使用selectize.js，你不应该将它与ng-model和ng-options混用，因为后者不起作用。这是一个基于您的 sn-ps 的最小工作示例 - plnkr.co/edit/0JvCrB1QfaRMk3kFBcsf?p=preview
@miqh 谢谢它的工作。你能把链接作为我接受的答案发布吗？

标签： javascript html angularjs selectize.js multiple-select

【解决方案1】：

发布我创建的示例作为答案，因为它似乎对 OP 有所帮助。

这里的建议是不要将 Selectize 与 ng-model 和 ng-options 混合使用，因为如果应用于相同的 select 元素，它们会在功能上相互冲突。

如果您想使用 Selectize，最好创建一个包装器（即一个指令，如我的示例中所示），以提供对需要它的 select 元素的初始化。

另外，不要忘记，由于 Selectize 会导致 AngularJS 上下文之外的数据更改，因此您需要手动触发摘要（即scope.$apply()）以确保 AngularJS 中的代码看到最新数据。

angular
  .module('app', [])
  .controller('ctrl', function ($scope) {
    $scope.items = [
      { storedArray: ['078...'] },
      { storedArray: [] },
      { storedArray: ['0cc...'] },
    ];
    $scope.skills = [
      { skillId: '078...', skillName: 'Java' },
      { skillId: '0cc...', skillName: 'Cisco UCS' },
    ];
    $scope.itemSelectizeOptions = $scope.items.map(function (item) {
      return {
        valueField: 'skillId',
        labelField: 'skillName',
        options: $scope.skills,
        items: item.storedArray,
        onChange: function (newItems) {
          item.storedArray = newItems;
          // `$apply()` needed because change occurs outside of AngularJS's knowledge
          $scope.$apply();
        }
      };
    })
  })
  .directive('selectize', function () {
    return {
      scope: {
        selectize: '<',
      },
      link: function (scope, el) {
        var selectize = $(el).selectize(scope.selectize);
      },
    };
  });

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div ng-repeat="options in itemSelectizeOptions">
    <select
      multiple
      selectize="options"></select>
  </div>
  <pre>{{ items | json }}</pre>
</div>

【讨论】：