ng-repeat: filtruj według pojedynczego pola

Mam szereg produktów, które powtarzam za pomocą ng-repeat i używam

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

aby filtrować te produkty według koloru. Filtr działa, ale jeśli nazwa / opis produktu itp. Zawiera kolor, produkt pozostaje po zastosowaniu filtra.

Jak ustawić filtr tak, aby stosował się tylko do pola koloru mojej tablicy, a nie do każdego pola?

Zobacz przykład na stronie filtra . Użyj obiektu i ustaw kolor we właściwości color:

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

Określ właściwość (tj. colour), W której chcesz zastosować filtr:

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

Możesz filtrować według obiektu o właściwości pasującej do obiektów, które musisz na nim filtrować:

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

Można to oczywiście przekazać zmienną, jak sugerował Mark Rajcok.

Jeśli chcesz filtrować według wnuka (lub głębiej) danego obiektu, możesz kontynuować budowanie hierarchii obiektów. Na przykład, jeśli chcesz filtrować według „thing.properties.title”, możesz wykonać następujące czynności:

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

Możesz także filtrować według wielu właściwości obiektu, dodając je do obiektu filtru:

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

Najlepszym sposobem na to jest użycie funkcji:

HTML

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

javascript

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

Alternatywnie możesz użyć ngHide lub ngShow, aby dynamicznie wyświetlać i ukrywać elementy na podstawie określonych kryteriów.

Uważaj na filtr kątowy. Jeśli chcesz wybrać określoną wartość w polu, nie możesz użyć filtru.

Przykład:

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

Spowoduje to wybranie obu, ponieważ użyj czegoś takiego, substr
co oznacza, że ​​chcesz wybrać produkt, w którym „kolor” zawiera ciąg „niebieski”, a nie gdzie „kolor” to „niebieski”.

Szukaj według koloru:

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

możesz też zrobić gniazdo wewnętrzne.

filter:{prop1:{innerprop1:searchinput}}

Jeśli miałbyś wykonać następujące czynności:

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

... dostaniesz nie tylko elementy itemTypeId 2 i itemStatus 1, ale także przedmioty o itemType 20, 22, 202, 123 i itemStatus 10, 11, 101, 123. Jest tak, ponieważ filtr: {.. .} składnia działa jak ciąg zawierający zapytanie.

Jeśli jednak dodasz warunek : true , filtr zostanie dokładnie dopasowany:

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

moja droga jest taka

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 jest polem wejściowym lub czymkolwiek innym

Wyświetlane w ten sposób

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

Musisz użyć filter:{color_name:by_colour}zamiast

filter:by_colour

Jeśli chcesz dopasować do pojedynczej właściwości obiektu, napisz tę właściwość zamiast obiektu, w przeciwnym razie niektóre inne właściwości zostaną dopasowane.

Określ właściwość w filtrze obiektu, do którego chcesz zastosować filtr:

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

Ale chcesz zastosować filtr tylko dla imienia

<input type = "text" ng-model = "first_name_model"/>
<div ng-repeat="user in users| filter:{ firstname: first_name_model}">

Jeśli chcesz filtrować dla jednego pola:

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

Jeśli chcesz filtrować dla wszystkich pól:

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

i https://docs.angularjs.org/api/ng/filter/filter dobre dla Ciebie