代码之家 › 专栏 › 技术社区 › Sean

ng选项具有预选值时不绑定

ng-options jquery-select2 angularjs

Sean · 技术社区 · 7 年前

我正在使用 select2 创建新帖子时,使用类似于标签的功能创建div。

堆叠角度为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>

注意:看起来很凌乱,但我用这个来显示我的原始标签

控制器代码段:

$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

附言:我的标签是一个字符串数组,没有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>

控制台。日志仍然只捕获预先存在的标记。忽略新的。

5 回复 | 直到 6 年前

Abhishek Singh 6 年前

以下实现可能是您所要求的:

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/编辑/cwDRa2Qjg2IlUi5JOAPj

Community CDub 4 年前

我使用angular select文档作为参考,并根据找到的示例创建了一个plunker here 。

我用过这个 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>

快乐编码

georgeawg 6 年前

我认为您可以尝试从DOM中删除元素,然后使用新值再次添加它。如果带有标志,则可以使用ng。。

<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;
  })
}

Tessy Thomas 6 年前

ng模型持有相同的阵列岗位。标签。请使用不同的ng型号来保存所选标签。

HTML:

<div ng-controller="MyCtrl">
    <!-- this list is for assure, that two way binding works -->
    List of Tags:
  <ul>
        <li data-ng-repeat="tag in post.tags">{{tag.tag}}</li>
    </ul>
  <br>
  Select Tags: <!-- selected items are not binded to the model -->
    <select multiple ui-select2 class="form-control" data-ng-model="selectedTags" >
        <option data-ng-repeat="tag in post.tags" value="{{tag._id}}" text="">{{tag.tag}}</option>
    </select>
</div>

控制器:

var myApp = angular.module('myApp', ['ui.select2']);

function MyCtrl($scope) {
    $scope.selectedTags = [4]; // Averell is preselected (id:4)
    $scope.post = {
       tags: [
    {tag: "Angular JS", _id: "5ae410756b7a61080cd17c81"},
    {tag: "Java", _id: "5ae410756b7a61080cd17c80"},
    {tag: "JQuery", _id: "5ae410756b7a61080cd17c7f"}
  ]};
};

请检查这个 DEMO 检查你是否得到了你想要的东西。

georgeawg 6 年前

试试看这是否有效:

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

唯一的变化是 按标记跟踪。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>