angularjs - ng-options 在具有预选值时不绑定(bind)

Question

我正在使用 select2在创建新帖子时创建带有功能标签的 div。

堆栈是 Angular 1.6.x

在我创建新帖子时效果很好但是 当我在编辑所述帖子时添加预选值时，预选值永远不会改变默认值。

简而言之，这些值没有约束力。

见下文:

HTML 片段:

<div class="form-group">
  <label for="tags" class="control-label">Tags</label>
    <select name="tags" class="tagsSearch" class="form-control" id="tags"
            ng-options="tag as tag for tag in post.tags track by tag"
            ng-model="post.tags" style="width: 100%" multiple>
    </select>
</div>

注意:它看起来很乱，但我让它工作以显示我的原始标签

Controller 片段:

$http.get('/api/post', {params: { title: $scope.title }})
.then(function(res){
   $scope.post = res.data.post;
});

$scope.updatePost = function() {
  console.log($scope.post.tags);
};

问题是标签没有绑定(bind)，所以如果值是:tag1、tag2、tag3 在渲染时我添加:tag4 - updatePost 控制台 tag1、tag2 和 tag3

PS:我的标签是一个字符串数组，没有像 ID 一样的键(看到其他一些引用它们的帖子)。

很失落。任何输入将不胜感激。

谢谢

编辑 - 2018 年 4 月 28 日:

我已将我的标签更新为数组的对象，如下所示:

[
  {tag: "tag1", _id: "5ae410756b7a61080cd17c81"},
  {tag: "tag2", _id: "5ae410756b7a61080cd17c80"},
  {tag: "tag3", _id: "5ae410756b7a61080cd17c7f"}
]

当我这样做时它仍然不起作用:

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

console.log 仍然只捕获预先存在的标签。新的被忽略。

Answer 1

下面的实现可能是您要求的:

HTML:

 <form name="myForm">
    <label for="mySelect">Make a choice:</label>
    <select name="mySelect" id="mySelect"
      ng-options="option.tag for option in post.tag track by option._id"
      ng-model="post.selected" multiple></select>
      <br>
      <button ng-click="updatePost()"> Add Tag</button>
 </form>

JS:

(function(angular) {
  'use strict';
  angular.module('defaultValueSelect', [])
    .controller('ExampleController', ['$scope', '$http', function($scope, $http) {
      var url = "https://jsonblob.com/api/jsonBlob/aa6b4eb4-5284-11e8-a5ee-fd00735e3b38";
      var index = 4;
      var extraObj = {
        tag: "tag",
        _id: "5ae410756b7a61080cd17c7"
      };
      $http
        .get(url)
        .then(function(response) {
          $scope.post = {
            tag: response.data,
            selected: response.data[0]
          };
        });
      $scope.updatePost = function() {
        var tmp = {};
        tmp = angular.copy(extraObj);
        console.log(angular.copy($scope.post));
        tmp.tag += index;
        tmp._id += index;
        $scope.post.tag.push(tmp);
        console.log($scope.post);
        index++;
      }
    }]);
})(window.angular);

有关工作代码，请参阅此 plunkr:plnkr.co/edit/cwDRa2Qjg2IlUi5JOAPj