ng-repeat добавить элемент только один раз

Question

Использование AngularJS позволяет добавлять элемент только один раз. Для этого фрагмента кода ниже говорим, что я вхожу в F и добавляю его в список элементов. Есть ли способ ограничить меня или любого пользователя от добавления F еще раз?

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <div ng-controller="MyCtrl"> 
 
     <ul> 
 
      <li ng-repeat="item in items track by $index">{{item}}</li> 
 
     </ul> 
 
     <input ng-model="newItem" type="text"></input> 
 
     <button ng-click="add(newItem)">Add</button> 
 
    </div> 
 
</div> 
 

 
<script> 
 
var app = angular.module('myApp', []); 
 

 
app.controller('MyCtrl', function($scope) { 
 
    $scope.items = ["A", "B", "C", "D"]; 
 
    $scope.add = function(item) { 
 
     $scope.items.push(item); 
 
    }; 
 

 
}); 
 
</script>

Answer 1

ES5

Вы должны проверить это вручную в своем методе.

$scope.add = function (item) { 
    if ($scope.items.indexOf(item) === -1) { 
     $scope.items.push(item); 
    } 
}; 

---

ES6

Вы можете использовать Set.

множество объектов позволяет хранить уникальные значения любого типа

$scope.items = new Set(["A", "B", "C", "D"]); 

$scope.add = function (item) { 
    $scope.items.add(item); 
}; 

Answer 2

Перед вызовом функции push(), чтобы добавить новый элемент в массиве, вы можете найти, если вы найдете идентичный элемент внутри массива.

В этом случае я бы изменить код так:

app.controller('MyCtrl', function($scope) { 
    $scope.items = ["A", "B", "C", "D"]; 

    $scope.add = function(item) { 
     var found = false; 

     for(var i = 0; i< $scope.items.length; i++){ 
      if(item == scope.items[i]) 
      found = true; 
      return; //end the for loop 
     } 

     //new item not found in the array 
     if(!found) $scope.items.push(item); 
    }; 

}); 

Answer 3

Вы можете использовать в JavaScript Array.prototype.some, чтобы проверить, если элемент уже и добавить, основанный на том, что:

$scope.add = function(item) { 

    if (!$scope.items.some(isAlreadyPresent)) { 
     $scope.items.push(item); 
    } else { 
     console.log('item already present'); 
    } 

    function isAlreadyPresent(ele) { 
     return ele === item; 
    } 
}; 

Приведи MDN для более подробная информация о some: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/some