AngularJs ng-repeat Фильтровать по лимиту условно - PullRequest
Новая
       25

AngularJs ng-repeat Фильтровать по лимиту условно

0 голосов
/ 20 ноября 2018

Как я могу запустить 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 элемент в качестве вывода, то есть Али вместо Али и Хаммад .Потому что ng-repeat остановился после 2-й итерации и не проверял другие элементы.Итак, как я могу получить все соответствующие элементы по status == true с заданным пределом?

1 Ответ

0 голосов
/ 20 ноября 2018

Вы можете связать 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>
...