Question

在创建新帖子时，我正在使用select2创建一个包含功能标记的div。

Stack是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 snippet：

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

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

问题是标签没有绑定，所以如果值是：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

ng-model持有相同的数组post.tags。请使用不同的ng-model来保存所选标签。

HTML：

secondViewController

控制器：

var username = StructOperation.yourGlovalVariable.userName;

请检查此DEMO并检查您是否得到了您想要的内容。

Answer 2

我使用了角度选择文档作为参考，并从他们找到的here示例中创建了一个plunker。

我使用此blob来模拟您的数据集。

这是我的select指令的样子。我建议您不要使用所选项的绑定覆盖数组的绑定，这就是导致问题的原因。

(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";
    $http
        .get(url)
        .then(function(response){
            $scope.post = {
                tag: response.data,
                selected: response.data[0]
            };
        })
 }]);
})(window.angular);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="defaultValueSelect">
  <div ng-controller="ExampleController">
  <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>
  </form>
  <hr>
  <tt>option = {{post.selected}}</tt><br/>
</div>
</body>

快乐编码

Answer 3

我认为你可以尝试从DOM中删除元素并使用新值再次添加它。你可以使用ng-if和一个标志..

<div class="form-group" ng-if="someflag">
  <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>

现在您要更新数据的位置，请输入以下代码：（注意：您需要在控制器中注入$ timeout）

//Default Value
$scope.someflag = true;

//Update Data
$scope.myNewData = function(){
  //Remove from DOM
  $scope.someflag = false;

  //Add to the DOM with some delay
  $timeout(function(){
    $scope.someflag = true;
  })
}

Answer 4

以下实施可能是您要求的：

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

Answer 5

试试看是否有效：

ng-options="tag as tag for tag in post.tags track by tag.id"

仅通过tag.id 更改曲目。如果标记对象中有不同的键，也可以使用它而不是id。

带有该更改的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.id" ng-model="post.tags" style="width: 100%" multiple> </select> </div>

ng-options在具有预选值时不绑定

5 个答案: