Як фільтрувати за властивістю об'єкта в angularJS


139

Я намагаюся створити спеціальний фільтр в AngularJS, який буде фільтрувати список об'єктів за значеннями певної властивості. У цьому випадку я хочу фільтрувати за властивістю "полярність" (можливі значення "Позитивний", "Нейтральний", "Негативний").

Ось мій робочий код без фільтра:

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>

Ось масив "$ range.tweets" у форматі 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"}}

Найкращий фільтр, який я міг придумати, такий:

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

Цей метод повертає порожній масив. І нічого не друкується з заяви "console.log (полярність)". Схоже, я не вставляю правильні параметри для доступу до об'єктної властивості "полярності".

Будь-які ідеї? Ваша відповідь високо цінується.


3
Приємне запитання, але код може бути зменшений, значна частина цього питання не стосується.
setec

Відповіді:


218

Вам просто потрібно використовувати filterфільтр (див. Документацію ):

<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
Чи є спосіб відфільтрувати список елементів, передавши спеціальний фільтр події ng-click за межами оператора ng-repeat? У цьому випадку я хочу розмістити три кнопки "полярності" над результатами, які фільтруються на основі рейтингу.
sh3nan1gans

2
Я не впевнений, що зрозумію. Якщо ви хочете вибрати полярність для фільтрування, ви можете передати змінну області замість простого тексту: filter:{polarity:polarityToFilter}де $scope.polarityToFilterзаповнюється натисканням на одну з трьох кнопок. Це те, що ти намагаєшся зробити?
Blackhole

Здається, це могло б спрацювати. Однак моє додаток також має змогу видаляти окремі елементи списку.
sh3nan1gans

Проблема з фільтруванням полягає в тому, що новий масив створюється кожного разу, коли застосовується фільтр, який розриває зв'язок між відфільтрованим елементом та його оригінальним індексом у нефільтрованому масиві. Чи є спосіб зберегти краватку чи є мій єдиний варіант? Ось підручник щодо альтернативи фільтруванню за допомогою ng- hid
sh3nan1gans

ngRepeat відкриває $indexвласність у локальній області, яку ви також можете використовувати.
Blackhole

27

Документація має повну відповідь. Так чи інакше це робиться:

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

фільтруватиметься лише ageу dataмасиві та trueвідповідає точній відповідності.

Для глибокої фільтрації

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

Це $особлива властивість для глибокого фільтра і trueпризначена для точного відповідності, як вище.


Простий і чистий.
scaryguy

Чи вбудований цей фільтр чи його потрібно записати як у Angular & AngularJS?
P

23

Ви також можете зробити це, щоб зробити його більш динамічним.

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

Тоді ви ng-повтор буде виглядати так

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

Цей фільтр, звичайно, буде використовуватися лише для фільтрації за полярністю


5

У нас є колекція, як показано нижче:


введіть тут опис зображення

Синтаксис:

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

Приклад:

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

-OR-

Синтаксис:

ng-bind="(input | filter)"

Приклад:

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

4

Ви можете спробувати це. його працює для мене "ім'я" є властивістю в обр.

repeat="item in (tagWordOptions | filter:{ name: $select.search } ) track by $index
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.