Cara memfilter menurut properti objek di angularJS

139

Saya mencoba membuat filter khusus di AngularJS yang akan memfilter daftar objek berdasarkan nilai properti tertentu. Dalam hal ini, saya ingin memfilter berdasarkan properti "polaritas" (kemungkinan nilai "Positif", "Netral", "Negatif").

Ini kode kerja saya tanpa filter:

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>

Berikut ini array "$ scope.tweets" dalam 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"}}

Filter terbaik yang bisa saya buat sebagai berikut:

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

Metode ini mengembalikan array kosong. Dan tidak ada yang dicetak dari pernyataan "console.log (polaritas)". Sepertinya saya tidak memasukkan parameter yang benar untuk mengakses properti objek "polaritas."

Ada ide? Tanggapan Anda sangat dihargai.

sh3nan1gans
sumber
3
Pertanyaan yang bagus, tetapi kode dapat dikurangi, sebagian besar tidak relevan dengan pertanyaan.
setec

Jawaban:

218

Anda hanya perlu menggunakan filterfilter (lihat dokumentasi ):

<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

Lubang hitam
sumber
1
Apakah ada cara untuk memfilter daftar item dengan meneruskan filter khusus ke acara ng-klik di luar pernyataan ng-repeat? Dalam hal ini, saya ingin menempatkan tiga tombol "polaritas" di atas hasil yang memfilter berdasarkan peringkat.
sh3nan1gans
2
Saya tidak yakin untuk mengerti. Jika Anda ingin memilih polaritas untuk difilter, Anda dapat meneruskan variabel cakupan alih-alih teks biasa: di filter:{polarity:polarityToFilter}mana $scope.polarityToFilterdiisi oleh klik pada salah satu dari tiga tombol. Apakah ini yang ingin Anda lakukan?
Blackhole
Sepertinya itu bisa berhasil. Namun, aplikasi saya juga harus dapat menghapus setiap item daftar.
sh3nan1gans
Masalah dengan pemfilteran adalah bahwa array baru dibuat setiap kali filter diterapkan yang memecah ikatan antara item yang difilter dan indeks aslinya dalam array tanpa filter. Apakah ada cara untuk mempertahankan dasi atau ng-hide satu-satunya pilihan saya? Berikut ini tutorial untuk alternatif penyaringan dengan menggunakan ng-hide: bennadel.com/blog/…
sh3nan1gans
ngRepeat memaparkan $indexpropertie pada lingkup lokal yang juga dapat Anda gunakan.
Blackhole
27

The dokumentasi memiliki jawaban yang lengkap. Pokoknya begini caranya:

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

hanya akan memfilter agedalam dataarray dan trueuntuk pencocokan tepat.

Untuk penyaringan yang dalam,

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

Ini $adalah properti khusus untuk filter dalam dan trueuntuk pencocokan tepat seperti di atas.

Abel Terefe
sumber
Sederhana dan bersih.
scaryguy
Apakah filter ini bawaan atau perlu ditulis dalam Angular & AngularJS?
P Satish Patro
23

Anda juga bisa melakukan ini untuk membuatnya lebih dinamis.

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

Maka Anda ng-repeat akan terlihat seperti ini

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

Filter ini tentu saja hanya akan digunakan untuk menyaring berdasarkan polaritas

Llewellyn Collins
sumber
5

Kami memiliki Koleksi seperti di bawah ini:


masukkan deskripsi gambar di sini

Sintaksis:

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

Contoh:

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

-ATAU-

Sintaksis:

ng-bind="(input | filter)"

Contoh:

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

Anda bisa mencoba ini. itu berfungsi untuk saya 'nama' adalah properti di arr.

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