ng-repeat Artikel nur einmal hinzufügen

Question

Mit AngularJS können Sie einen Artikel nur einmal hinzufügen. Für dieses Codeschnipsel unten sage ich, dass ich F eingeben und es der Liste der Elemente hinzufügen soll. Gibt es eine Möglichkeit, mich oder einen Benutzer daran zu hindern, F wieder hinzuzufügen?

<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

Sie müssen es manuell in Ihrer Methode überprüfen.

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

---

ES6

Sie können eine Set verwenden.

Das Set-Objekt ermöglicht das Speichern von einzigartige Werte jeglicher Art

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

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

Answer 2

die push() Funktion vor dem Aufruf des neuen Elements in dem Array hinzufügen möchten, können Sie, wenn Sie ein identisches Element innerhalb des Arrays finden suchen.

In diesem Fall ich den Code wie folgt bearbeiten würde:

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

können Sie verwenden JavaScript ist Array.prototype.some zu überprüfen, ob das Element bereits ist, und fügen Sie basiert darauf, dass:

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

Siehe MDN für weitere Informationen über some: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/some