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

Question

有什么方法可以限制 AngularJS 中重复的项目数？就像在联系人列表中一样，我需要输入相同的姓名和联系电话，但只输入 2 次，当我尝试第三次输入时，它会显示一些警报，提示您已经输入了联系方式。如何使用 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

您可以通过以下代码限制 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
};

Answer 2

试试这个

HTML

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

  }

在var name 变量中，您可以将要检查的属性放入 2 次插入。