从 Angular 的绑定中预定义 select2 数据

Question

我有一个 select2 多值表单输入，它从后端获取数据。

当我想用数据填充它时它可以工作，但是我想在这里预定义一些值，并且能够根据需要添加/删除更多标签。

我的$scope.post如下：

{
  "post": {
  "title": "test for tags",
  "description": "test for tags",
  "category": "Hospital",
  "dateCreated": "2017-12-12T04:44:24.629Z",
  "tags": [
    "shayan",
    "bruce-lee",
    "imran-khan-(official)"
    ],
  }
}

我希望将 tagsSearch 字段（HTML 下方）设置为：“shayan”、“bruce-lee”和“imran-khan-（官方）”。如您所见，这是绑定到 Angular 的 $scope.post

我的 HTML：

<div class="form-group">
  <select class="tagsSearch" class="form-control" ng-model="post.tags" id="tags" style="width: 100%"></select>
</div>

我的 select2 实现（但现在与搜索无关）。

$(".tagsSearch").select2({
    placeholder: 'Search for tags',
    delay: 250,
    tags: true,
    multiple: true,
    tokenSeparators: [',', ' '],
    minimumInputLength: 2,
    minimumResultsForSearch: 1,
    ajax: {
        url: function (params) {
            return '/api/searchTags';
        },
        dataType: "json",
        type: "GET",
        data: function (params) {
            return {
                text: params.term 
            };
        },
        processResults: function(data){
            return{
                results: $.map(data, function(obj){
                return {
                    id: obj.name, text: obj.name
                };
              })
            };
        }}
  })
);

我的 searchTags 响应如下（例如）：

[
    {
    "_id": "5a1909180fe59b0580302743",
    "name": "bruce-lee",
    }
]

我想我在这里遗漏了一些非常明显的东西，但我无法破解它。

提前感谢您的帮助。

PS：我看过以前的类似问题的帖子。没有一个是 a) 与我的实现类似或 b) 根本工作。

Answer 1

一个带有 AngularJS 的 jQuery 插件？

您的代码的核心问题是您将 jQuery 插件与 AngularJS 混合在一起。 Select2 已经设计为在this component 中与 AngularJS 一起使用。您应该尽快迁移到使用它。但是，这不是您的代码无法运行的唯一原因。

为什么您的代码不起作用？

好吧，您直接将标签数组分配给ng-model。要使 Select2 插件正常工作，您最好需要在 select 标签中提供 options，这是由 ngOptions 指令完成的。此外，因为您支持多选，AngularJS 需要知道选择框支持多选。因此，需要在选择框中设置multiple 属性。最后，ngOptions 指令与ngModel 协作将选定的值绑定到范围变量。

这是您的select 框在上述修改后的转换方式：

<select class="tagsSearch" class="form-control" id="tags" ng-options="tag for tag in post.post.tags" ng-model="post.post.tags" style="width: 100%" multiple></select>

将所有这些放在一起（并稍微更改代码），您会发现this fiddle 可以根据您的要求工作。

结果

您希望 select2 框显示所有选定的标签。这段代码选择了$scope.selectedTags变量定义的所有标签。

进一步的工作

您可以根据需要使用 AJAX 设置此变量 ($scope.selectedTags)。请记住阅读ngOptions的文档，以免陷入常见错误。