Meneruskan argumen ke filter angularjs


99

Apakah mungkin untuk meneruskan argumen ke fungsi filter sehingga Anda dapat memfilter dengan nama apa pun?

Sesuatu seperti

$scope.weDontLike = function(item, name) {
    console.log(arguments);
    return item.name != name;
};

Jawaban:


223

Sebenarnya ada lagi (mungkin solusi yang lebih baik) di mana Anda dapat menggunakan filter 'filter' asli sudut dan tetap meneruskan argumen ke filter kustom Anda.

Perhatikan kode berikut:

<div ng-repeat="group in groups">
    <li ng-repeat="friend in friends | filter:weDontLike(group.enemy.name)">
        <span>{{friend.name}}</span>
    <li>
</div>

Untuk membuat ini bekerja, Anda cukup menentukan filter Anda sebagai berikut:

$scope.weDontLike = function(name) {
    return function(friend) {
        return friend.name != name;
    }
}

Seperti yang Anda lihat di sini, weDontLike sebenarnya mengembalikan fungsi lain yang memiliki parameter Anda dalam cakupannya serta item asli yang berasal dari filter.

Saya butuh 2 hari untuk menyadari bahwa Anda dapat melakukan ini, belum melihat solusi ini di mana pun.

Periksa Polaritas terbalik dari filter angular.js untuk melihat bagaimana Anda dapat menggunakan ini untuk operasi berguna lainnya dengan filter.


Jika filter Anda memerlukan banyak argumen, lihat Bagaimana cara memanggil filter Angular.js dengan beberapa argumen?
nh2

Metode ini juga memecahkan masalah aneh di mana di dalam ng-repeat saya tidak bisa meneruskan parameter saya sendiri ke filter saya. Tidak peduli apa yang saya lakukan, mereka terus kembali sebagai indeks dan koleksi keseluruhan. Dengan melakukan metode pengembalian ini saya bisa melewatkan parameter saya dan masih memuat elemen asli, perbaikan bagus!
Dennis Smolek

Jawaban ini memecahkan masalah saya di mana saya tidak dapat meneruskan variabel $ scope sebagai parameter ke fungsi filter. Solusi terbaik. Suara positif!
valafar

Jika saya dapat memberikan suara positif ini lebih dari sekali, saya akan memastikan bahwa itu adalah jawaban yang paling disukai dalam sejarah SO. Ini telah mengganggu saya selama bertahun-tahun ... dan kemudian saya menemukan jawaban (sekarang berusia 2 tahun) ... Terima kasih banyak.
PKD

Masih berguna di 2019! Terima kasih banyak.
ashilon

76

Dari apa yang saya pahami, Anda tidak dapat meneruskan argumen ke fungsi filter (saat menggunakan filter 'filter'). Apa yang harus Anda lakukan adalah menulis filter kustom, seperti ini:

.filter('weDontLike', function(){

return function(items, name){

    var arrayToReturn = [];        
    for (var i=0; i<items.length; i++){
        if (items[i].name != name) {
            arrayToReturn.push(items[i]);
        }
    }

    return arrayToReturn;
};

Ini adalah jsFiddle yang berfungsi: http://jsfiddle.net/pkozlowski_opensource/myr4a/1/

Alternatif sederhana lainnya, tanpa menulis filter khusus adalah dengan menyimpan nama yang akan difilter dalam sebuah lingkup dan kemudian menulis:

$scope.weDontLike = function(item) {
  return item.name != $scope.name;
};

Terima kasih prefek! Menyimpan nama dalam ruang lingkup tidak akan berfungsi dengan baik karena saya memiliki tiga daftar dari data yang sama pada halaman yang sama saya memfilter dengan status (atau nama) yang berbeda.
Shapeshifter

ada untuk mengatur 'Adam' (mengacu pada JSFiddle Anda) secara dinamis? tampaknya tidak mungkin (dan saya rasa itu sengaja) untuk menggabungkan ngModel dan filter kustom di Angular ...
Rolf

Apakah mungkin untuk menyusun ulang parameter filter? Misalnya meneruskan item ke parameter kedua filter?
Pooya

Perlu dicatat bahwa dalam contoh ini markupnya adalah {{items | weDontLike: 'thenameyoudontlike'}} ... sekarang Anda harus pergi ke biola untuk mendapatkannya. Juga perlu diperhatikan bahwa Anda dapat meneruskan beberapa parameter ke filter kustom Anda {{items | weDontLike: 'thename': ['I am', 'an array']: 'dan seterusnya'}} Anda hanya perlu menambahkan lebih banyak argumen ke filter kustom Anda untuk mengaksesnya.
Benjamin Conant

62

Sebenarnya Anda dapat mengirimkan parameter ( http://docs.angularjs.org/api/ng.filter:filter ) dan tidak memerlukan fungsi khusus hanya untuk ini. Jika Anda menulis ulang HTML Anda seperti di bawah ini, ini akan berfungsi:

<div ng:app>
 <div ng-controller="HelloCntl">
 <ul>
    <li ng-repeat="friend in friends | filter:{name:'!Adam'}">
        <span>{{friend.name}}</span>
        <span>{{friend.phone}}</span>
    </li>
 </ul>
 </div>
</div>

http://jsfiddle.net/ZfGx4/59/


8
Iya. Catatan tambahan - jika nama seseorang adalah '! Adam', Anda membuatnya seperti {name: '!! Adam'}.
honzajde

5
Anda juga dapat melewatkan array di sini juga seperti inifilter:['Adam', 'john']
iConnor

6
Tautan jsfiddle rusak.
Seregwethrin

4
! Adam adalah nama terburuk yang pernah ada
Ben Wheeler

6
Bukan-Bukan-Adam jelas lebih buruk.
twip

30

Anda cukup melakukan seperti ini Di Template

<span ng-cloak>{{amount |firstFiler:'firstArgument':'secondArgument' }}</span>

Di filter

angular.module("app")
.filter("firstFiler",function(){

    console.log("filter loads");
    return function(items, firstArgument,secondArgument){
        console.log("item is ",items); // it is value upon which you have to filter
        console.log("firstArgument is ",firstArgument);
        console.log("secondArgument ",secondArgument);

        return "hello";
    }
    });

Ini jawaban terbaik. Ia bekerja dengan objek dinamis. Ini harus menjadi jawaban yang diterima.
abelabbesnabi

2

Memperluas jawaban pkozlowski.opensource dan menggunakan array'smetode filter bawaan javascript, solusi prettified bisa jadi ini:

.filter('weDontLike', function(){
    return function(items, name){
        return items.filter(function(item) {
            return item.name != name;
        });
    };
});

Ini tautan jsfiddle .

Lebih lanjut tentang filter Array di sini .


1

Anda dapat memberikan beberapa argumen ke filter sudut!

Mendefinisikan aplikasi sudut saya dan dan variabel tingkat aplikasi -

var app = angular.module('filterApp',[]);
app.value('test_obj', {'TEST' : 'test be check se'});

Filter Anda akan seperti: -

app.filter('testFilter', [ 'test_obj', function(test_obj) {
    function test_filter_function(key, dynamic_data) {
      if(dynamic_data){
        var temp = test_obj[key]; 
        for(var property in dynamic_data){
            temp = temp.replace(property, dynamic_data[property]);
        }
        return temp;
      }
      else{
        return test_obj[key] || key;
      }

    }
    test_filter_function.$stateful = true;
    return test_filter_function;
  }]);

Dan dari HTML Anda akan mengirimkan data seperti: -

<span ng-bind="'TEST' | testFilter: { 'be': val, 'se': value2 }"></span>

Di sini saya mengirim objek JSON ke filter. Anda juga dapat mengirim data apa pun seperti string atau angka.

Anda juga dapat mengirimkan sejumlah argumen dinamis untuk difilter, dalam hal ini Anda harus menggunakan argumen untuk mendapatkan argumen tersebut.

Untuk demo yang berfungsi, buka di sini - meneruskan beberapa argumen ke filter sudut


0

Anda cukup menggunakan | filter:yourFunction:arg

<div ng-repeat="group in groups | filter:weDontLike:group">...</div>

Dan di js

$scope.weDontLike = function(group) {
//here your condition/criteria
return !!group 
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.