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

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

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

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

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

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

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

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

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

Ви можете фільтрувати об’єкт із властивістю, що відповідає об'єктам, які потрібно фільтрувати на ньому:

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

Звичайно, це може бути передано змінною, як запропонував Марк Райкок.

Якщо ви хочете відфільтрувати онука (або глибше) даного об’єкта, ви можете продовжувати розробляти свою ієрархію об’єктів. Наприклад, якщо ви хочете відфільтрувати на "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 } }">

Найкращий спосіб зробити це - скористатися функцією:

html

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

javascript

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

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

Будьте обережні з кутовим фільтром. Якщо ви хочете вибрати конкретне значення в полі, ви не можете використовувати фільтр.

Приклад:

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

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

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

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

filter:{prop1:{innerprop1:searchinput}}

Якби ви зробили наступне:

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

мій шлях такий

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>

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

filter:by_colour

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

Вкажіть властивість у фільтрі об’єкта, до якого потрібно застосувати фільтр:

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

Якщо ви хочете фільтрувати для одного поля:

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