2013-07-22 31 views
124

Próbuję utworzyć niestandardowy filtr w AngularJS, który będzie filtrować listę obiektów według wartości określonej właściwości. W tym przypadku chcę filtrować według właściwości "polaryzacji" (możliwe wartości "Pozytywny", "Neutralny", "Negatywny").Jak filtrować według właściwości obiektu w angularJS

Oto mój kod pracy bez filtra:

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> 

Oto "$ scope.tweets" matryca w formacie 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"}} 

Najlepszy filtr, który mogę wymyślić w następujący sposób:

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

Ta metoda zwraca pustą tablicę. Nic nie jest drukowane z instrukcji "console.log (polaryzacja)". Wygląda na to, że nie wstawiam poprawnych parametrów, aby uzyskać dostęp do właściwości obiektu o "polaryzacji".

Wszelkie pomysły? Twoja odpowiedź jest bardzo doceniana.

+3

Nicea pytanie, ale kod może zostać zmniejszona, duża część z nich nie jest istotne do pytania. – setec

Odpowiedz

203

po prostu trzeba użyć filtru filter (patrz 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

+1

Nailed to! Dziękujemy – sh3nan1gans

+0

Czy istnieje sposób na filtrowanie listy elementów poprzez przekazanie niestandardowego filtru do zdarzenia ng-click poza poleceniem ng-repeat? W tym przypadku chcę umieścić trzy przyciski "polaryzacji" nad wynikami filtrowania w oparciu o ocenę. – sh3nan1gans

+2

Nie jestem pewien, aby zrozumieć. Jeśli chcesz wybrać polaryzację do przefiltrowania, możesz przekazać zmienną zasięgu zamiast zwykłego tekstu: '' 'filter: {polarity: polarityToFilter}' '' gdzie '' '$ scope.polarityToFilter''' jest wypełniane przez kliknij jeden z trzech przycisków. Czy to właśnie próbujesz zrobić? – Blackhole

21

Można też to zrobić, aby uczynić go bardziej dynamiczny.

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

Wtedy ng powtarzania będzie wyglądać następująco

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

Filtr ten będzie oczywiście być wykorzystane tylko do filtrowania przez polaryzację

24

documentation ma pełną odpowiedź. W każdym razie jest to jak to jest zrobione:

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

filtruje tylko age w data tablica i true jest dokładne dopasowanie.

Do głębokiego filtrowania

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

$ jest szczególnym miejscem dla głębokim filtrze i true jest dla dokładnego dopasowania jak powyżej.

+0

Prosty i czysty. – scaryguy

3

Możesz spróbować. to działa dla mnie 'name' to własność w arr.

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

Mamy Collection, jak poniżej:


enter image description here

Składnia:

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

Przykład:

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

LUB

Składnia:

ng-bind="(input | filter)" 

Przykład:

ng-bind="(Collectionstatus | filter:{Value:dt.Status})[0].KeyName" 
Powiązane problemy