Как отфильтровать ng-repeat по значению свойства?

Question

Как отфильтровать ng-repeat по значению свойства?

0

При повторении списка с помощью ng-repeat, как я могу добавить условие/фильтр по свойству этих элементов.

Пример (конечно, в реальном мире есть несколько предметов):

{"items":[{"type":"xxx"}]}

Я хочу показать только те элементы, где type!='test'.

Следующие просто ничего не печатают:

<ul ng-repeat="item in items | filter: (item.type != 'test')">

Если я удаляю фильтр, все предметы будут напечатаны, конечно.

Кроме того, если это возможно, как я могу создать условие, которое проверяет, не допустимы ли значения нескольких type?

membersound 07 июнь 2016, в 18:23

Источник

Теги:

javascript

angularjs

2 ответа

1

Вы можете изменить свой ng-repeat чтобы читать так:

<ul ng-repeat="item in items | filter: {type: '!test'}">

Чтобы предоставить несколько значений type вы можете создать свой собственный фильтр для повторного использования следующим образом:

app.filter('typeFilter', function(){
  return function(arr,criteria){
    if(!angular.isDefined(criteria) || criteria == ''){
      return arr;
    }

    return arr.filter(function(curr){
      return criteria.indexOf(curr.type) == -1;
    });
  }
});

а затем измените инструкцию ng-repeat образом:

//List array of criteria...
<ul ng-repeat="item in items | typeFilter:['test'] ">

Abdullah Rasheed 07 июнь 2016, в 14:15

0

Отлично, а как добавить несколько «ключевых слов» для проверки в фильтре?
membersound 07 июнь 2016, в 15:39
0

Как filter: {type: ['test', 'xxx']} но это не работает.
membersound 07 июнь 2016, в 15:44
1

вам придется создать свой собственный фильтр с более сложным механизмом фильтрации. Вы можете использовать собственный метод filter чтобы создать новый массив для отображения
Abdullah Rasheed 07 июнь 2016, в 16:04

Показать ещё 1 комментарий

Ещё вопросы

Отлично, а как добавить несколько «ключевых слов» для проверки в фильтре?
Как filter: {type: ['test', 'xxx']} но это не работает.
вам придется создать свой собственный фильтр с более сложным механизмом фильтрации. Вы можете использовать собственный метод filter чтобы создать новый массив для отображения

devconcept · Accepted Answer · 2016-06-07T13-50-00.000Z

Простой, используйте функцию в выражении фильтра.

angular.module('app', [])
  .controller('AppCtrl', function($scope) {
    $scope.items = [{
      "type": "xxx"
    }, {
      "type": "test"
    }];

    $scope.filterFn = function(value) {
       return value.type !== 'test';
    };
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="AppCtrl">
  <ul>
    <li ng-repeat="item in items | filter: filterFn">{{item.type}}</li>
  </ul>
</div>

Если ваша схема данных изменится, просто обновите функцию фильтра.

Вы также можете использовать объектную нотацию

angular.module('app', [])
  .controller('AppCtrl', function($scope) {
    $scope.items = [{
      "type": "xxx"
    }, {
      "type": "test"
    }];
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="AppCtrl">
  <ul>
    <li ng-repeat="item in items | filter: {type: '!test'}">{{item.type}}</li>
  </ul>
</div>

но это имеет некоторые ограничения, такие как не поддержка примитивных фильтров значений (он ожидает объект со свойствами как элемент), и один и тот же фильтр не может быть указан несколько раз (что-то вроде {type:"!test!xxx"})