Question

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

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

如果未定义限制，则输入将保持不变。

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

Answer 2

为了达到预期的结果，使用ng-show和条件检查数组长度和限制使用$ index＆lt; 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或更小以查看差异

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

2 个答案: