从Angular的绑定中

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一起使用。您应该尽快迁移到使用它。但是，这并不是您的代码无效的唯一原因。

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

好吧，您直接将tags数组分配给ng-model。要使Select2插件正常工作，您最好在options代码中提供select，这由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的文档，这样就不会陷入常见的错误。