Ng-repeat: фильтр по одному полю

Ответ 1

См. пример на странице filter. Используйте объект и задайте цвет в свойстве цвета:

Search by color: <input type="text" ng-model="search.color">
<div ng-repeat="product in products | filter:search"> 

Ответ 2

Укажите свойство (т.е. colour), в которое вы хотите применить фильтр:

<div ng-repeat="product in products | filter:{ colour: by_colour }">

Ответ 3

Вы можете фильтровать объект с свойством, соответствующим объектам, которые вы должны фильтровать на нем:

app.controller('FooCtrl', function($scope) {
   $scope.products = [
       { id: 1, name: 'test', color: 'red' },
       { id: 2, name: 'bob', color: 'blue' }
       /*... etc... */
   ];
});

<div ng-repeat="product in products | filter: { color: 'red' }"> 

Это, конечно, может быть передано переменной, как предположил Марк Райкок.

Ответ 4

Если вы хотите отфильтровать внука (или глубже) данного объекта, вы можете продолжать строить свою иерархию объектов. Например, если вы хотите отфильтровать "thing.properties.title", вы можете сделать следующее:

<div ng-repeat="thing in things | filter: { properties: { title: title_filter } }">

Вы также можете фильтровать несколько свойств объекта, просто добавив их в свой объект фильтра:

<div ng-repeat="thing in things | filter: { properties: { title: title_filter, id: id_filter } }">

Ответ 5

Лучший способ сделать это - использовать функцию:

HTML

<div ng-repeat="product in products | filter: myFilter">

Javascript

$scope.myFilter = function (item) { 
    return item === 'red' || item === 'blue'; 
};

В качестве альтернативы вы можете использовать ngHide или ngShow для динамического отображения и скрытия элементов на основе определенных критериев.

Ответ 6

Будьте осторожны с фильтром angular. Если вы хотите выбрать определенное значение в поле, вы не можете использовать фильтр.

Пример:

Javascript

app.controller('FooCtrl', function($scope) {
   $scope.products = [
       { id: 1, name: 'test', color: 'lightblue' },
       { id: 2, name: 'bob', color: 'blue' }
       /*... etc... */
   ];
});

HTML

<div ng-repeat="product in products | filter: { color: 'blue' }"> 

Это выберет оба, потому что используйте что-то вроде substr
Это означает, что вы хотите выбрать продукт, где "цвет" содержит строку "синий", а не где "цвет" - "синий".

Ответ 7

Если вы должны были сделать следующее:

<li class="active-item" ng-repeat="item in mc.pageData.items | filter: { itemTypeId: 2, itemStatus: 1 } | orderBy : 'listIndex'"
                id="{{item.id}}">
    <span class="item-title">{{preference.itemTitle}}</span>
</li>

... вы не только получите предметы itemTypeId 2 и itemStatus 1, но также получите предметы с элементами Item 20, 22, 202, 123 и itemStatus 10, 11, 101, 123. Это связано с тем, что фильтр: Синтаксис {...} работает как строка, содержащая запрос.

Однако, если вы должны добавить условие: true, он будет фильтровать с помощью точного соответствия:

<li class="active-item" ng-repeat="item in mc.pageData.items | filter: { itemTypeId: 2, itemStatus: 1 } : true | orderBy : 'listIndex'"
                id="{{item.id}}">
    <span class="item-title">{{preference.itemTitle}}</span>
</li>

Ответ 8

Поиск по цвету:

     <input type="text" ng-model="searchinput">

     <div ng-repeat="product in products | filter:{color:searchinput}">

вы также можете сделать внутреннее гнездо.

Фильтр: {prop1: {innerprop1: searchinput}}

Ответ 9

Мой путь - это

subjcts is

[{"id":"1","title":"GFATM"},{"id":"2","title":"Court Case"},{"id":"3","title":"Renewal\/Validity"},{"id":"4","title":"Change of Details"},{"id":"5","title":"Student Query"},{"id":"6","title":"Complains"}]

sub - поле ввода или любое другое, что вам нравится

Отображается следующим образом

<div ng-if="x.id === sub" ng-repeat=" x in subjcts">{{x.title}}</div>

Ответ 10

Вы должны использовать   filter:{color_name:by_colour} вместо

filter:by_colour

Если вы хотите совместить с одним свойством объекта, тогда напишите это свойство вместо объекта, иначе какое-либо другое свойство получит совпадение.