AngularJS Filter. Фильтрация в AngularJS.

Angular JS предоставляет удобные возможности для фильтрации объектов в зависимости от значения либо самих объектов, либо их полей. В данном примере, мы будем фильтровать объекты по значению поля status. У нас будет checkbox, который будет определять, объекты с каикм значением поля status мы будем показывать. Если галочка стоит то значения -
["STARTED", "NOT_STARTED", "FINISHED"]
если галочка не стоит, то значения
["STARTED", "NOT_STARTED"]

HTML Code

Checkbox показывать объекты со статусом FINISHED.

<div class="col-lg-3 pull-right text-right">
    <input  type="checkbox" id="showFinishedCheckbox"
      ng-model="showFinished" ng-change="showFinishedClicked()">
    <label for="showFinishedCheckbox">Show Finished Clients</label>
</div>

Таблица объектов, в которой используется фильтр.

 <table class="table table-hover">
    <thead>
        <th ng-repeat="item in head" ng-click="changeSorting(item.field)" 
          class="sortable">{{item.title}}
        <span ng-show="displaySorting(item.field, false)">▼</span>
        <span ng-show="displaySorting(item.field, true)">▲</span>
      </th>
    </thead>
    <tbody>
        <tr ng-class="{active : selectedCampaign.id == c.id}"
          ng-repeat="c in campaigns | orderBy:sort.column:sort.descending | 
          filter:query | filter:statusFilter" ng-click="selectCampaign(c)">
     <td><a ng-click="editCampaign(c); $event.stopPropagation()" 
              style="cursor:pointer;">{{c.title}}</a>
     </td>
     <td>{{c.campaignCode}}</td>
     <td>{{c.startDate | date:'mediumDate'}}</td>
     <td>{{c.endDate | date:'mediumDate'}}</td>
     <td>{{getStatus(c.status).name}}</td>
 </tr>
    </tbody>
</table>

Использование фильтра.

 <tr ng-class="{active : selectedCampaign.id == c.id}"
          ng-repeat="c in campaigns | orderBy:sort.column:sort.descending | 
          filter:query | filter:statusFilter" ng-click="selectCampaign(c)">

CoffeScript Code

Изначально показываем объекты у которых поле status имеет значение либо STARTED либо NOT_STARTED

$scope.filteredStatuses = ["STARTED", "NOT_STARTED"]

Изначально не стоит галочка показывать объекты, у которых поле status имеет значение FINISHED

$scope.showFinished = false

Обработчки нажатия на checkbox. Если ставим галочку, то добавляем в массив допустимых статусов статус FINISHED, если убираем галочку, то массив без статуса FINISHED

$scope.showFinishedClicked = () ->
    if $scope.showFinished
      $scope.filteredStatuses = ["STARTED", "NOT_STARTED", "FINISHED"]
    else
      $scope.filteredStatuses = ["STARTED", "NOT_STARTED"]
    return

Непосредственно сам фильтер. Проверяем, если поле status объекта не входит в массив допустимых значений, то не возвращаем ничего. Если же входит то, возвращаем объект.

$scope.statusFilter = (campaign) ->
    if $scope.filteredStatuses.length > 0
        if $.inArray(campaign.status, $scope.filteredStatuses) < 0
            return
    return campaign

Источники

https://docs.angularjs.org/api/ng/filter/filter

https://docs.angularjs.org/guide/filter

http://stackoverflow.com/questions/15868248/how-to-filter-multiple-values-or-operation-in-angularjs

https://docs.angularjs.org/guide/filter#creating-custom-filters

http://jsfiddle.net/Xesued/Bw77D/7/

http://stackoverflow.com/questions/16227325/how-do-i-call-an-angular-js-filter-with-multiple-arguments

http://jsfiddle.net/65Pyj/