Question

有什么方法可以限制AngularJS中重复的项目数量？在联系人列表中，我需要输入相同的姓名和联系人号码，但只需输入2次，当我尝试进入第3次时，它会向我显示一些警告，您已经输入了联系方式。如何使用AngularJS或JavaScript实现此任务？

我的代码是

<md-list-item ng-show="showContactList" ng-repeat="numbers in contactList track by $index" >
    <i ng-show="numbers.type == 'test'">textsms</i>
    <i ng-show="numbers.type == 'CELL' || numbers.type == 'EXT'">phone</i>
    <img ng-show="numbers.type == 'PAGER'" src="pager.png" width="26">
    <div class="md-list-item-text" ng-class="{'md-offset': phone.options.offset }">
          <h3>{{ numbers.type }}</h3>
          <p>{{ numbers.value }}</p>
    </div>
    <i ng-click="arrayText.push(numbers);">add</i>
</md-list-item>

在上面的代码中，我可以为联系人姓名和号码添加N号码。

Answer 1

试试这个

HTML

false

控制器

  <i class="material-icons md-avatar-icon add-rm-icon margin-right" ng-click="insertRecord(numbers);">add</i>

在var existed = 0; $scope.insertRecord = function(numbers){ var name = numbers.type; angular.forEach($scope.arrayText, function(value, key) { var arr = Object.values(value); if(arr.indexOf(name) !== -1 ) { existed++; console.info(existed); } }); if(existed >= 2){ console.info('already exist') existed = 0; }else{ $scope.arrayText.push(numbers); existed = 0; } }变量中，您可以将要检查的属性插入2次。

Answer 2

您可以通过以下代码限制ng-repeat中的显示项目。

在HTML模板绑定中

 {{ limitTo_expression | limitTo : limit : begin}}

在控制器中

  $filter('limitTo')(input, limit, begin)

有关详细信息，请参阅https://docs.angularjs.org/api/ng/filter/limitTo。

对于插入创建功能中的限制项

<i class="material-icons md-avatar-icon add-rm-icon margin-right" ng-click="pushFunction(numbers);">add</i>

控制器中的

$scope.pushFunction = funcation(numbers){
    // check number exist 
    $scope.existedNumbers = $scope.arratext.filter(function (objArray) {
       return (objArray == numbers);
    });
    if($scope.existedNumbers && $scope.existedNumbers.length<2)
      $scope.arrayText.push(numbers);
   else
      // show alert
};

有没有办法限制ng-repeat中重复项目的数量？

2 个答案: