javascript - Avoiding Dupes when pushing values from form to array in AngularJS - Stack Overflow

admin管理员组

文章数量:1025513

I'm having problems avoiding dupes with my code. Here is a simplified example. I know the problem is in the array object being a reference of the same scope variable, but what is the best way to avoid it?

<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>

Here is a fiddle that demonstrates the problem: /

I'm having problems avoiding dupes with my code. Here is a simplified example. I know the problem is in the array object being a reference of the same scope variable, but what is the best way to avoid it?

<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>

Here is a fiddle that demonstrates the problem: http://jsfiddle/u8Fuk/8/

• javascript
• angularjs

Share Improve this question Follow asked Dec 30, 2013 at 8:53 drew schmaltzdrew schmaltz 1,58444 gold badges1919 silver badges2929 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Use track by syntax to fix this problem.

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

Here is a fiddle.

Depends on what your goal is.

If you want to allow for duplicate values you need to change the code a bit as each item in the ngRepeat has to have a unique id. See the track by section here.

That would work like this:

<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>

See the updated fiddle here.

If you don't want to allow for the same values you need to search for it.

<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>

See the updated fiddle here.

I'm having problems avoiding dupes with my code. Here is a simplified example. I know the problem is in the array object being a reference of the same scope variable, but what is the best way to avoid it?

<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>

Here is a fiddle that demonstrates the problem: /

I'm having problems avoiding dupes with my code. Here is a simplified example. I know the problem is in the array object being a reference of the same scope variable, but what is the best way to avoid it?

<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>

Here is a fiddle that demonstrates the problem: http://jsfiddle/u8Fuk/8/

• javascript
• angularjs

Share Improve this question Follow asked Dec 30, 2013 at 8:53 drew schmaltzdrew schmaltz 1,58444 gold badges1919 silver badges2929 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Use track by syntax to fix this problem.

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

Here is a fiddle.

Depends on what your goal is.

If you want to allow for duplicate values you need to change the code a bit as each item in the ngRepeat has to have a unique id. See the track by section here.

That would work like this:

<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>

See the updated fiddle here.

If you don't want to allow for the same values you need to search for it.

<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>

See the updated fiddle here.

本文标签： javascriptAvoiding Dupes when pushing values from form to array in AngularJSStack Overflow