ng-repeat: filtra per singolo campo

Ho una serie di prodotti che sto ripetendo usando ng-repeat e sto usando

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

per filtrare questi prodotti per colore. Il filtro funziona ma se il nome / descrizione del prodotto ecc. Contiene il colore, il prodotto rimane dopo l'applicazione del filtro.

Come posso impostare il filtro in modo che si applichi solo al campo colore del mio array piuttosto che a tutti i campi?

Vedi l'esempio nella pagina del filtro . Usa un oggetto e imposta il colore nella proprietà color:

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

Specificare la proprietà (ovvero colour) in cui si desidera applicare il filtro:

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

Puoi filtrare per oggetto con una proprietà corrispondente agli oggetti che devi filtrare su di esso:

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

Naturalmente questo può essere passato per variabile, come suggerito da Mark Rajcok.

Se vuoi filtrare un nipote (o più profondo) dell'oggetto dato, puoi continuare a costruire la tua gerarchia di oggetti. Ad esempio, se si desidera filtrare su "thing.properties.title", è possibile effettuare le seguenti operazioni:

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

Puoi anche filtrare su più proprietà di un oggetto semplicemente aggiungendole all'oggetto filtro:

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

Il modo migliore per farlo è usare una funzione:

html

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

javascript

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

In alternativa, puoi usare ngHide o ngShow per mostrare e nascondere dinamicamente gli elementi in base a determinati criteri.

Fare attenzione con il filtro angolare. Se si desidera selezionare un valore specifico nel campo, non è possibile utilizzare il filtro.

Esempio:

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

Questo selezionerà entrambi, perché usa qualcosa del genere substr
Ciò significa che vuoi selezionare un prodotto in cui "colore" contenga la stringa "blu" e non dove "colore" sia "blu".

Cerca per colore:

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

puoi anche fare un nido interno.

filter:{prop1:{innerprop1:searchinput}}

Se dovessi fare quanto segue:

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

... non otterresti solo articoli di itemTypeId 2 e itemStatus 1, ma otterrai anche articoli con itemType 20, 22, 202, 123 e itemStatus 10, 11, 101, 123. Questo perché il filtro: {.. .} La sintassi funziona come se una stringa contenga una query.

Tuttavia, se dovessi aggiungere la condizione : true , filtrerebbe per corrispondenza esatta:

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

la mia strada è questa

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 è un campo di input o quello che ti piace

Visualizzazione in questo modo

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

È necessario utilizzare filter:{color_name:by_colour}invece di

filter:by_colour

Se si desidera abbinare una singola proprietà di un oggetto, scrivere quella proprietà anziché l'oggetto, altrimenti alcune altre proprietà otterranno la corrispondenza.

Specificare la proprietà nel filtro, dell'oggetto su cui si desidera applicare il filtro:

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

Ma vuoi applicare il filtro solo sul nome

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

Se vuoi un filtro per un campo:

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

Se vuoi un filtro per tutti i campi:

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

e https://docs.angularjs.org/api/ng/filter/filter ti fanno bene