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

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

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

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

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

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

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

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

<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 для вас.