ng-повтор: фільтр по одному полі


484

У мене є масив продуктів, над якими я повторюю, використовуючи ng-repeat і використовую

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

фільтрувати ці продукти за кольором. Фільтр працює, але якщо назва / опис продукту тощо містить колір, то продукт залишається після застосування фільтра.

Як встановити фільтр так, щоб він застосовувався лише до кольорового поля мого масиву, а не до кожного поля?


Спеціальні фільтри також потужні =), можливо, вам це сподобається, наприклад: noypi-linux.blogspot.com/2014/07/…
Нойпі Гілас

Різні рішення: stackoverflow.com/a/24992197/257470
andrew.fox

Чудова робота написання кольорів правильно
MikeKulls

Відповіді:


475

Дивіться приклад на сторінці фільтра . Використовуйте об'єкт та встановіть колір у властивості кольору:

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

Дякую Марку, чи є користь зробити це таким чином, а не запропонованим нижче методом?
Тім Вебстер

7
@Seglespaan, не дуже. Ви можете виявити, що метод, представлений bmleite та blesh, читається приємніше, оскільки видно, що ви фільтруєте за кольором. Цей метод є більш компактним, що може бути корисним, якщо ви хочете здійснювати пошук за кількома властивостями, і вам не потрібно мати довгий об’єкт у HTML: filter:{ color: '...', size: '...', ...}
Марк Rajcok

2
@MarkRajcok, як би я міг шукати за кількома властивостями, дивлячись на об'єднання, а не на перехрестя?
jetcom

2
@jetcom, вам потрібен власний фільтр, см stackoverflow.com/a/13845135/215945
Mark Rajcok

1
Я не знаю, чи запитувала ОП, як зробити поле пошуку настільки, як відфільтрувати значення в ng-повторі, коли вони повторюються на сторінці. Відповідь під цією видається найбільш релевантною на поставлене питання.
twknab

573

Вкажіть властивість (тобто colour), де ви хочете застосувати фільтр:

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

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
Це має бути прийнятою відповіддю. Це найкоротше. Ну, за винятком того, що "колір" має занадто багато голосних.
Реп

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
скажемо, що у мене є такий вид сфери.продукти: {id: 1, ім'я: 'тест', колір: 'lightblue'}, {id: 2, ім'я: 'bob', колір: [{передній план: чорний, фон : білий}]}. то як я можу фільтрувати продукт на основі кольору: фон, щоб отримати біле значення?
Гері

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
такий тип "чи" тип або "і" тип фільтра.
sms

1
Це ж питання полягає в тому, що А чи АБО при фільтруванні більше одного властивості?
програв переклад

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
Це означає, що ви хочете вибрати продукт, де "color" містить рядок "blue", а не там, де "color" є "blue".


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

21

Пошук за кольором:

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

можна зробити і внутрішнє гніздо.

filter:{prop1:{innerprop1:searchinput}}

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 є чистим розчином
Кілізо

4

Ви повинні використовувати filter:{color_name:by_colour}замість

filter:by_colour

Якщо ви хочете зіставитись з однією властивістю об’єкта, тоді напишіть це властивість замість об'єкта, інакше якесь інше властивість отримає збіг.


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

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 корисний для вас

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.