Cách lọc theo thuộc tính đối tượng trong angularJS

Question

Tôi đang cố gắng tạo bộ lọc tùy chỉnh trong AngularJS sẽ lọc danh sách các đối tượng theo các giá trị của một thuộc tính cụ thể. Trong trường hợp này, tôi muốn lọc theo thuộc tính "phân cực" (giá trị có thể có của "Tích cực", "Trung tính", "Phủ định").

Đây là mã làm việc của tôi không có bộ lọc:

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> 

Dưới đây là mảng "$ scope.tweets" ở định dạng 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"}} 

Bộ lọc tốt nhất tôi có thể đưa ra như sau:

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

Phương thức này trả về một mảng trống. Và không có gì được in từ câu lệnh "console.log (phân cực)". Có vẻ như tôi không chèn các thông số chính xác để truy cập thuộc tính đối tượng của "phân cực".

Bất kỳ ý tưởng nào? Câu trả lời của bạn được đánh giá cao.

Answer 1

Bạn chỉ cần phải sử dụng các bộ lọc filter (xem 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

Answer 2

Bạn cũng có thể làm điều này để làm cho nó năng động hơn.

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

Sau đó, bạn ng-repeat sẽ trông như thế này

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

Bộ lọc này sẽ đương nhiên chỉ được sử dụng để lọc theo phân cực

Answer 3

Các documentation có câu trả lời hoàn chỉnh. Dù sao đây là cách nó được thực hiện:

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

sẽ lọc chỉ age trong data mảng và true là trận đấu chính xác.

Để lọc sâu,

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

Các $ là một tài sản đặc biệt cho bộ lọc sâu và true là trận đấu chính xác như trên.

Answer 4

Bạn có thể thử điều này. làm việc cho tôi 'tên' là tài sản trong arr.

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

Answer 5

Chúng tôi có sưu tập như sau:

Cú pháp:

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

Ví dụ:

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

-HOẶC-

Cú pháp:

ng-bind="(input | filter)" 

Ví dụ:

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