从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

A jQuery plugin with AngularJS?

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

Why your code is not working?

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

以下是在上述修改后你的qazxsw po盒子如何转换：

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> 按照您的要求工作。

The result

您希望select2框显示所有选定的标签。此代码选择由this fiddle变量定义的所有标记。

Further work

您可以根据需要使用AJAX设置此变量（$scope.selectedTags）。请记住阅读$scope.selectedTags的文档，这样你就不会陷入常见错误。