Angularjs 预定义从角度选择2个数据'；s绑定

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

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

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

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

我的$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)"
    ],
  }
}

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

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

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

我的HTML：

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

我的searchTags回复如下（例如）：

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

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

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

提前谢谢你的帮助

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

附言：我看过以前关于类似问题的帖子。没有一个是a）与我的实现类似的，或者b）根本无法工作。

一个带有AngularJS的jQuery插件？

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

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

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

为什么你的代码不起作用？ 那么，您直接将标记数组分配给

ng model

。要使Select2插件正常工作，最好在

select

标记中提供

options

，这是通过指令完成的。此外，由于您支持多项选择，AngularJS需要知道选择框支持多项选择。因此，需要在选择框中设置多个属性。最后，

ngOptions

指令与协作，将所选值绑定到范围变量

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

以下是您的

选择

框在进行上述修改后的转换方式：

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

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

将所有这些放在一起（并稍微更改代码），您可以找到符合您需求的工作

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

结果 您希望select2框显示所有选定的标记。此代码选择由

$scope.selectedTags

变量定义的所有标记

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

进一步工作

---

您可以使用AJAX根据需要设置此变量（

$scope.selectedTags

）。请记住阅读的文档，这样您就不会陷入常见的错误。

先生，您是个天才！。我正在做一个项目（完整的堆栈），在这样的场景中很容易迷失方向。非常感谢你的帮助。（可以在1小时内给予悬赏）

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