NG-REPEAT: filter per enkelveld

Ik heb een reeks producten die ik herhaal met behulp van NG-REPEAT en gebruik

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

Om deze producten per kleur te filteren. Het filter werkt, maar als de productnaam / beschrijving etc de kleur bevat, blijft het product achter nadat het filter wordt toegepast.

Hoe stel ik het filter in om alleen toe te passen op het kleurveld van mijn array in plaats van elk veld?

Antwoord 1, Autoriteit 100%

Zie het voorbeeld op de filter pagina. Gebruik een object en stel de kleur in de eigenschap Kleur in:

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

Antwoord 2, Autoriteit 120%

Geef het pand op (d.w.z. colour) waar u wilt dat het filter wordt toegepast:

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

Antwoord 3, Autoriteit 37%

U kunt filteren met een object met een woning die overeenkomt met de objecten die u moet filteren:

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

Dit kan natuurlijk door variabele worden doorgegeven, omdat Mark Rajcok voorgesteld.

Antwoord 4, Autoriteit 22%

Als u wilt filteren op een kleinkind (of dieper) van het gegeven object, kunt u doorgaan met het bouwen van uw objecthiërarchie. Als u bijvoorbeeld wilt filteren op ‘ding.properties.title’, kunt u het volgende doen:

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

U kunt ook filteren op meerdere eigenschappen van een object alleen door ze toe te voegen aan uw filterobject:

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

Antwoord 5, Autoriteit 21%

De beste manier om dit te doen is om een ​​functie te gebruiken:

html

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

javascript

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

U kunt ook NGHIDE of NGSHOW gebruiken om elementen dynamisch te tonen en te verbergen op basis van een bepaalde criteria.

Antwoord 6, Autoriteit 13%

Wees voorzichtig met een hoekfilter. Als u een specifieke waarde in het veld wilt selecteren, kunt u filter niet gebruiken.

Voorbeeld:

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

Hiermee selecteert u beide, omdat u iets als substr
gebruikt. Dat betekent dat u een product wilt selecteren waarbij “kleur” de tekenreeks “blauw” bevat en niet waar “kleur” “blauw” is.

Antwoord 7, autoriteit 5%

Zoeken op kleur:

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

je kunt ook een binnennest doen.

filter:{prop1:{innerprop1:searchinput}}

Antwoord 8, autoriteit 2%

Als u het volgende zou doen:

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

…u krijgt niet alleen items van itemTypeId 2 en itemStatus 1, maar u krijgt ook items met itemType 20, 22, 202, 123 en itemStatus 10, 11, 101, 123. Dit komt omdat het filter: {…} syntaxis werkt zoals een string bevat query.

Als u echter de voorwaarde :truezou toevoegen, zou dit filteren op exacte overeenkomst:

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

Antwoord 9

mijn manier is dit

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 is een invoerveld of wat je maar wilt

Zo weergegeven

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

Antwoord 10

U moet gebruiken
filter:{color_name:by_colour}in plaats van

filter:by_colour

Als je wilt matchen met een enkele eigenschap van een object, schrijf dan die eigenschap in plaats van object, anders krijgt een andere eigenschap een overeenkomst.

Antwoord 11

Geef de eigenschap in filter op van het object waarop u filter wilt toepassen:

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

Maar je wilt alleen filter toepassen op voornaam

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

Antwoord 12

Als u op één veld wilt filteren:

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

Als u wilt filter voor alle veld:

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

en
https://docs.angularjs.org/api/ng/filter/filterGoed voor u