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

Question

通过这个示例（ 纯html select标签的JS Bin ），我可以实现纯html select多个。

但是我正在使用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 （ selectSkill ）。

在没有填充的情况下，正常的负载可以正常工作，但是我正在尝试使用selectize动态设置值。

求助，谢谢。

我的演示数据：

**$scope.skills**

**item.storedArray**

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