Question

我有以下代码：

<md-chips ng-model="myModel" md-autocomplete-snap="true"  md-require-match="autocompleteDemoRequireMatch">
                        <md-autocomplete md-selected-item="selected" md-search-text="searchText" md-items="item in myItems| filter:{name: searchText}" md-item-text="item" placeholder="Search ...">
                            <span md-highlight-text="searchText"> {{item.name}}</span>
                        </md-autocomplete>
                        <md-chip-template>
                            <span>
                                <strong>{{$chip.name}}</strong>
                            </span>
                        </md-chip-template>
</md-chips>

我的模型myModel内容如下：

[{"id":"1","name":"Judy Foster"}]

和我的md项目如此：

[{"id":"1","name":"Judy Foster"}, {"id":"2","name":"Rudy Foster"}, {"id":"3","name":"Moody Foster"}]

如果myModel没有任何内容会发生什么......它工作正常，因为它不允许我输入重复项。

当myModel已经包含myItems中也存在的项时，它允许重复。

任何人都知道如何防止重复发生？

这是jsfiddle https://jsfiddle.net/9xyrktwL/

Answer 1

这是因为你的模型对象和你的项目列表的第一项是不一样的，即使它具有相同的属性，它们是内存中的不同对象，所以尝试重写你的控制器指向同一个对象，那样：

var app = angular.module('app', ['ngMaterial']);

app.controller('ctrl', ['$scope', '$filter', function($scope, $filter) {


    $scope.myItems = [{"id":"1","name":"Judy Foster"}, {"id":"2","name":"Rudy Foster"}, {"id":"3","name":"Moody Foster"}];
    $scope.myModel = [$scope.myItems[0]];
}]);

Answer 2

我只想添加这个，因为这实际上是完整的答案。

需要添加以下代码才能获得完整的解决方案。

https://jsfiddle.net/5sgeLj6y/

$scope.newModel = [];
  for (var i = 0; i < $scope.myItems.length; i++) {
    for (var j = 0; j < $scope.myModel.length; j++) {
      if ($scope.myItems[i].id === $scope.myModel[j].id) {
        $scope.newModel[j] = $scope.myItems[i];        
        break;
      }
    }
  }

如果模型已经包含项目，md-chip可以添加重复项

2 个答案: