基于 ngif 条件的长度的 ng-repeat 限制

Question

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

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

我想要这样的东西：

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

Answer 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

If limit is undefined, the input will be returned unchanged.

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

Answer 2

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

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或更少看区别

基于 ngif 条件的长度的 ng-repeat 限制

ng-repeat limit based on the length with ng-if condtion

javascript

limit

angularjs

angularjs-ng-repeat