web-dev-qa-db-fra.com

Comment filtrer par propriété d'objet dans angularJS

J'essaie de créer un filtre personnalisé dans AngularJS qui filtrera une liste d'objets en fonction des valeurs d'une propriété spécifique. Dans ce cas, je souhaite filtrer selon la propriété "polarité" (valeurs possibles de "positif", "neutre", "négatif").

Voici mon code de travail sans le filtre:

HTML:

<div class="total">
    <h2 id="totalTitle"></h2>
    <div>{{tweets.length}}</div>
    <div id="totalPos">{{tweets.length|posFilter}}</div>
    <div id="totalNeut">{{tweets.length|neutFilter}}</div>
    <div id="totalNeg">{{tweets.length|negFilter}}</div>
</div>

Voici le tableau "$ scope.tweets" au format JSON:

{{created_at: "Date", text: "Tweet text", user:{name: "user name", screen_name: "user       screen name", profile_image_url: "profile pic"}, retweet_count: "retweet count", polarity: "Positive"},
 {created_at: "Date", text: "Tweet text", user:{name: "user name", screen_name: "user screen name", profile_image_url: "profile pic"}, retweet_count: "retweet count", polarity: "Positive"},
 {created_at: "Date", text: "Tweet text", user:{name: "user name", screen_name: "user screen name", profile_image_url: "profile pic"}, retweet_count: "retweet count", polarity: "Positive"}}

Le meilleur filtre que je puisse trouver comme suit:

myAppModule.filter('posFilter', function(){
return function(tweets){
    var polarity;
    var posFilterArray = [];
    angular.forEach(tweets, function(Tweet){
        polarity = Tweet.polarity;
        console.log(polarity);
        if(polarity==='Positive'){
              posFilterArray.Push(Tweet);
        }
        //console.log(polarity);
    });
    return posFilterArray;
};
});

Cette méthode retourne un tableau vide. Et rien n'est imprimé à partir de l'instruction "console.log (polarité)". Il semble que je n'insère pas les paramètres corrects pour accéder à la propriété de l'objet "polarité".

Des idées? Votre réponse est grandement appréciée.

javascriptangularjs
134
sh3nan1gans

Vous devez simplement utiliser le filtre filter (voir le documentation ):

<div id="totalPos">{{(tweets | filter:{polarity:'Positive'}).length}}</div>
<div id="totalNeut">{{(tweets | filter:{polarity:'Neutral'}).length}}</div>
<div id="totalNeg">{{(tweets | filter:{polarity:'Negative'}).length}}</div>

Fiddle

216
Blackhole

Le documentation a la réponse complète. Quoi qu'il en soit, voici comment cela se fait:

<input type="text" ng-model="filterValue">
<li ng-repeat="i in data | filter:{age:filterValue}:true"> {{i | json }}</li>

ne filtrera que age dans data tableau et true correspond à la correspondance exacte.

Pour le filtrage en profondeur,

<li ng-repeat="i in data | filter:{$:filterValue}:true"> {{i}}</li>

Le $ est une propriété spéciale pour le filtre en profondeur et le true pour une correspondance exacte, comme ci-dessus.

26
Abel Terefe

Vous pouvez également le faire pour le rendre plus dynamique.

<input name="filterByPolarity" data-ng-model="text.polarity"/>

Ensuite, vous ressemblerez à ceci

<div class="Tweet" data-ng-repeat="Tweet in tweets | filter:text"></div>

Ce filtre ne sera bien sûr utilisé que pour filtrer par polarité

23
Llewellyn Collins

Nous avons Collection comme ci-dessous:


enter image description here

Syntaxe: 

{{(Collection/array/list | filter:{Value : (object value)})[0].KeyName}}

Exemple: 

{{(Collectionstatus | filter:{Value:dt.Status})[0].KeyName}}

- OU -

Syntaxe: 

ng-bind="(input | filter)"

Exemple: 

ng-bind="(Collectionstatus | filter:{Value:dt.Status})[0].KeyName"
5
Rahul Modi

Vous pouvez essayer ça. ça marche pour moi 'name' est une propriété dans arr.

repeat="item in (tagWordOptions | filter:{ name: $select.search } ) track by $index
3
Satish Singh