ng-repeat 限制基于具有 ngif 条件的长度答案

【问题标题】：ng-repeat limit based on the length with ng-if condtionng-repeat 限制基于具有 ngif 条件的长度
【发布时间】：2018-03-30 19:26:50
【问题描述】：

    <div ng-repeat="badgesData in deptUSersData.badges | limitTo : 7 track by $index">
      ........content.......
    </div>

我想limitTo : 7 只有deptUSersData.badges.lenght 大于 8 怎么办？

我想要这样的东西：

<div ng-repeat="badgesData in deptUSersData.badges 
 ng-if=deptUSersData.badges.lenght > 8 ? limitTo : 7 : '' track by $index>

【问题讨论】：

标签： javascript angularjs angularjs-ng-repeat limit

【解决方案1】：

您可以在controller 中设置一个变量并使用它来限制ng-repeat，类似于：

<div ng-repeat="badgesData in deptUSersData.badges | limitTo : myLimit track by $index">
   ........content.......
</div>


app.controller('someController', function($scope) {
    if(deptUSersData.badges.lenght > 8)
        $scope.myLimit = 7;
  }
);

不要担心length 小于8 和myLimit 最终是undefined

根据：limitTo documentattion

如果未定义限制，则输入将原样返回。

所以过滤器不应该应用并且应该显示所有内容。

【讨论】：

【解决方案2】：

为了达到预期的结果，使用 ng-show 和条件检查数组长度并使用 $index

ng-show="{{deptUSersData.badges.length > 8? $index < 7: true}}">

代码示例 - https://codepen.io/nagasai/pen/vRRQVw

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.limit = 6;
    $scope.deptUSersData = {
       badges :[
        1,2,3,4,5,6,7,8,9
       ]
    }
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>


<div ng-app="myApp" ng-controller="myCtrl">
  <div>
    <div ng-repeat="badgesData in deptUSersData.badges track by $index" ng-show="{{deptUSersData.badges.length > 8? $index < 7: true}}">
      {{badgesData}}
    </div>
  </div>
</div>

注意：将数组长度改为 8 或更少以查看差异

【讨论】：