Question

我在使用代码避免欺骗时遇到问题。这是一个简化的例子。我知道问题在于数组对象是同一范围变量的引用，但是避免它的最佳方法是什么？

<div ng-app="myApp">
  <div ng-controller="myCtrl">
    <input type="text" ng-model="item" />
    <div ng-repeat="item in items">
      {{ item }}
    </div>
    <button ng-click="save()">Save</button>
  </div>
</div>
<script>
  angular.module('myApp', []).
  controller('myCtrl', function ($scope) {
    $scope.items = [];
    $scope.save = function() {
      $scope.items.push($scope.item);
    }
  });
</script>

这是一个演示问题的小提琴： http://jsfiddle.net/u8Fuk/8/

Answer 1

使用track by语法来解决此问题。

<div ng-repeat="item in items track by $index">
   {{ item }}
</div>

这是fiddle。

Answer 2

取决于您的目标。

如果您想允许重复值，则需要更改代码，因为ngRepeat中的每个项目都必须具有唯一ID。请参阅track by部分here。

这样就可以了：

<div ng-app="myApp">
  <div ng-controller="myCtrl">
    <input type="text" ng-model="item" />
    <div ng-repeat="item in items">
      {{ item.value }}
    </div>
    <button ng-click="save()">Save</button>
  </div>
</div>
<script>
  angular.module('myApp', []).
  controller('myCtrl', function ($scope) {
    $scope.items = [];
    $scope.save = function() {
        $scope.items.push({value:$scope.item});
    }
  });
</script>

请参阅更新的小提琴here。

如果您不想允许相同的值，则需要搜索它。

<div ng-app="myApp">
  <div ng-controller="myCtrl">
    <input type="text" ng-model="item" />
    <div ng-repeat="item in items">
      {{ item }}
    </div>
    <button ng-click="save()">Save</button>
  </div>
</div>
<script>
  angular.module('myApp', []).
  controller('myCtrl', function ($scope) {
    $scope.items = [];
    $scope.save = function() {
      var found = $scope.items.reduce(function(previous, i){
          if ($scope.item === i) return true;
          return previous;
        }, false);
      if (found){
        alert('duplicate value');
      }
      else{
        $scope.items.push($scope.item);
      }
    }
  });
</script>

请参阅更新的小提琴here。

在AngularJS中将值从表单推送到数组时避免使用Dupes

2 个答案: