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

484

У меня есть множество продуктов, которые я повторяю с помощью ng-repeat, и я использую

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

фильтровать эти продукты по цвету. Фильтр работает, но если название продукта / описание и т. Д. Содержит цвет, то продукт остается после применения фильтра.

Как настроить фильтр так, чтобы он применялся только к цветовому полю моего массива, а не к каждому полю?

Тим Вебстер
источник
Настраиваемые фильтры также эффективны =), вам это может понравиться, пример: noypi-linux.blogspot.com/2014/07/…
Noypi Gilas
Другое
Великолепная работа правописания - правильный путь
MikeKulls

Ответы:

475

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

Search by color: <input type="text" ng-model="search.color">
<div ng-repeat="product in products | filter:search"> 
Марк Райкок
источник
Спасибо Марк, есть ли какая-то польза от этого, а не от метода, предложенного ниже?
Тим Вебстер
7
@ Сеглеспан, не совсем. Вы можете обнаружить, что метод, представленный bmleite и blesh, выглядит лучше, так как вы можете видеть, что вы фильтруете по цвету. Этот метод более компактен, что может быть полезно, если вы хотите выполнять поиск по нескольким свойствам, и у вас не будет длинного объекта в HTML: filter:{ color: '...', size: '...', ...}
Марк Раджкок
2
@MarkRajcok, как бы я мог искать по нескольким свойствам, глядя на объединение, а не пересечение?
jetcom
2
@jetcom, вам понадобится специальный фильтр, см. stackoverflow.com/a/13845135/215945
Марк Райкок,
1
Я не знаю, спрашивал ли ОП, как создать окно поиска, а также как отфильтровать значения в ng-repeat, когда они повторяются на странице. Ответ под этим представляется наиболее актуальным для задаваемого вопроса.
Twknab
573

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

<div ng-repeat="product in products | filter:{ colour: by_colour }">
bmleite
источник
5
что если я хочу! by_colour как фильтр: {color:! by_colour} "
rjdmello
27
@rjdmello просто готовьтесь '!'+, вот так<div ng-repeat="product in products | filter:{ colour: '!'+by_colour }">
bmleite
3
Не уверен , что, если я правильно понял, но первое , что пришло мне на ум: <div ng-repeat="product in products | filter:{ resultsMap.annie: '!!' }"> или (что - то эквивалент) , как это: <div ng-repeat="product in products | filter:by">и на контроллере: $scope.by = { 'resultsMap.annie': '!!' };. Этот второй подход дает вам больше контроля над фильтруемым свойством. Примечание: '!!'означает «не ноль».
bmleite
2
@Federico, это customFilterможет быть простой объект, scopeкоторый вы обновляете по мере необходимости. Проверьте этот поршень .
bmleite
1
Это должен быть принятый ответ. Это самый краткий. Ну, разве что у «color» слишком много гласных.
Рэп
176

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

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' }"> 

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

Бен Леш
источник
2
допустим, у меня есть такой вид scope.products: {id: 1, name: 'test', color: 'lightblue'}, {id: 2, name: 'bob', color: [{foreground: black, background : белый}]}. тогда как я могу отфильтровать продукт по цвету: фон, чтобы получить значение белого?
Гери
2
@Gery: Честно говоря, я не думаю, что вы можете. В любом случае, использование фильтра: вообще плохая практика, IMO. В том смысле, что, по вашему мнению, логика должна быть в вашем контроллере и не очень тестируема.
Бен Леш,
Это способ перенести фильтрацию на контроллер и расширить модель. ozkary.com/2015/05/angularjs-value-mapping-with-dynamic.html .
Озкары
106

Если вы хотите фильтровать внука (или глубже) данного объекта, вы можете продолжить строить иерархию объектов. Например, если вы хотите отфильтровать '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 } }">
Дэвид Хансен
источник
2
это как 'или' тип или 'и' тип фильтра.
смс
1
Тот же вопрос, что И или ИЛИ при фильтрации более одного свойства?
lostintranslation
1
для фильтра ИЛИ единственный способ - это пользовательский фильтр, я думаю
Дмитрий Алгазин
99

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

HTML

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

Javascript

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

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

Хадер М.А.
источник
64

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

Пример:

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
Это означает, что вы хотите выбрать продукт, где «цвет» содержит строку «синий», а не где «цвет» это «синий».

Петр Б.
источник
88
<div ng-repeat="product in products | filter: { color: 'blue' }:true">будет работать только с точными совпадениями (в конце 'true' является аргументом компаратора: ссылка
Марк
21

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

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

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

filter:{prop1:{innerprop1:searchinput}}
CyberNinja
источник
10

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

<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, но вы также получите элементы с itemType 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>
Фил
источник
4

мой путь это

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>
Асад Али Хан
источник
В общем, использование ng-if - чистое решение
Kilizo
4

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

filter:by_colour

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

Amit Banerjee
источник
1

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

//Suppose Object
var users = [{
  "firstname": "XYZ",
  "lastname": "ABC",
  "Address": "HOUSE NO-1, Example Street, Example Town"
},
{
  "firstname": "QWE",
  "lastname": "YUIKJH",
  "Address": "HOUSE NO-11, Example Street1, Example Town1"
}]

Но вы хотите применить фильтр только по имени

<input type = "text" ng-model = "first_name_model"/>
<div ng-repeat="user in users| filter:{ firstname: first_name_model}">
Neeraj Bansal
источник
0

Если вы хотите фильтр для одного поля:

label>Any: <input ng-model="search.color"></label> <br>
<tr ng-repeat="friendObj in friends | filter:search:strict">

Если вы хотите фильтр для всех полей:

 label>Any: <input ng-model="search.$"></label> <br>
 <tr ng-repeat="friendObj in friends | filter:search:strict">

и https://docs.angularjs.org/api/ng/filter/filter для вас.

милад дн
источник