Question

如何最多运行ng-repeat 2次，但是每次迭代都应满足condition并输出包含两个元素的最终数据。例如，我有一个像这样的数组：

$scope.users = [
    {
        id: '1',
        name:'Ali',
        status: true
    },
    {
        id: '2',
        name:'Wajahat',
        status: false
    },
    {
        id: '3',
        name:'Hammad',
        status: true
    },
    {
        id: '4',
        name:'Ahmad',
        status: true
    }
];

HTML是这样的：

<div ng-repeat="user in users | limitTo:2" ng-if="user.status==true">{{user.name}}</div>

问题是，我只有1个元素作为输出，即 Ali 而不是 Ali 和 Hammad 。因为ng-repeat在第二次迭代后停止，并且未检查其他元素。那么，如何通过给定限制的 status == true 获得所有匹配的元素？

Answer 1

您可以将filter链接到ng-repeat表达式上，以在limitTo插入之前应用您首先需要的条件过滤。

请注意，在这种方法中，表达式的顺序很重要。

angular
  .module('app', [])
  .controller('ctrl', function ($scope) {
    $scope.users = [
      {
        id: '1',
        name:'Ali',
        status: true,
      },
      {
        id: '2',
        name:'Wajahat',
        status: false,
      },
      {
        id: '3',
        name:'Hammad',
        status: true,
      },
      {
        id: '4',
        name:'Ahmad',
        status: true,
      }
    ];
    
  });

<div ng-app="app" ng-controller="ctrl">
  <div ng-repeat="user in users | filter:{status: true} | limitTo:2">{{ user.name }}</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

AngularJs ng-repeat过滤器有条件限制

1 个答案: