javascript - Cum să filtrezi după o proprietate a obiectului în AngularJS


Încerc să creez un filtru personalizat în AngularJS care să filtreze o listă de obiecte după valorile unei proprietăți specifice. În acest caz, doresc să filtrez după proprietatea „polarity” (valori posibile „Positive”, „Neutral”, „Negative”).

Iată codul meu funcțional fără filtru:

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>

Iată array-ul "$scope.tweets" în 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"}}

Cel mai bun filtru la care m-am gândit este următorul:

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;
};
});

Această metodă returnează un tablou gol. Și nimic nu este tipărit de declarația „console.log(polarity)”. Se pare că nu introduc parametrii corecți pentru a accesa proprietatea obiectului „polarity”.

Ai vreo idee? Răspunsul tău este foarte apreciat.

Răspuns #1

Trebuie pur și simplu să folosești filtrul filter (vezi documentația) :

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

Vioară

Răspunsul #2

Documentația are răspunsul complet. Oricum, așa se face:

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

va filtra doar age în array-ul data, iar true este pentru potrivire exactă.

Pentru filtrare profundă,

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

$ este o proprietate specială pentru filtrare profundă, iar true este pentru potrivire exactă, ca mai sus.

Răspunsul #3

Ai putea face asta și pentru a o face mai dinamică.

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

Atunci ng-repeat-ul tău va arăta așa

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

Acest filtru va fi, desigur, folosit doar pentru a filtra după polaritate