ng-repeat一度だけ項目を追加する

Question

AngularJSを使用すると、項目を1回追加することができます。以下のコードスニペットでは、Fと入力して項目のリストに追加します。私や他のユーザーがFをもう一度追加することを制限する方法はありますか？配列に新しい項目を追加するpush()関数を呼び出す前に

<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

あなたの方法で手動でチェックする必要があります。あなたはSetを使用することができます

$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

あなたは、アレイ内の同じ項目を見つけた場合、あなたは検索することができます。私はこのようなコードを編集しますその場合

：

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

あなたは要素がすでにあるかどうかを確認し、それに基づいて追加するには、Webブラウザで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の詳細：