Fungsi filter kustom AngularJS


91

Di dalam pengontrol saya, saya ingin memfilter berbagai objek. Masing-masing objek ini adalah peta yang dapat berisi string serta daftar

Saya mencoba menggunakan $filter('filter')(array, function)format tetapi saya tidak tahu cara mengakses elemen individual array di dalam fungsi saya. Berikut ini potongan untuk menunjukkan apa yang saya inginkan.

$filter('filter')(array, function() {
  return criteriaMatch(item, criteria);
});

Dan kemudian di criteriaMatch(), saya akan memeriksa apakah masing-masing properti individu cocok

var criteriaMatch = function(item, criteria) {
  // go thro each individual property in the item and criteria
  // and check if they are equal
}

Saya harus melakukan semua ini di controller dan menyusun daftar daftar dan mengaturnya dalam ruang lingkup. Jadi saya hanya perlu mengakses dengan $filter('filter')cara ini. Semua contoh yang saya temukan di internet sejauh ini memiliki pencarian kriteria statis di dalam fungsi, mereka tidak lulus objek kriteria dan menguji setiap item dalam array.


3
Mengapa Anda membutuhkan filter? Biasanya filter digunakan dari template. Bisakah Anda tidak hanya memiliki fungsi biasa di pengontrol Anda jika Anda hanya menggunakannya dari sana?
Ketan

Alih-alih menelusuri setiap elemen secara manual, saya pikir kita bisa menggunakan fungsionalitas $ filter ('filter') sudut (yang akan mengurus iterasi melalui setiap elemen jika kita hanya menentukan fungsi predikat)
user2368436

Jawaban:


174

Anda dapat menggunakannya seperti ini: http://plnkr.co/edit/vtNjEgmpItqxX5fdwtPi?p=preview

Seperti yang Anda temukan, filterterima fungsi predikat yang menerima item demi item dari array. Jadi, Anda hanya perlu membuat fungsi predikat berdasarkan yang diberikan criteria.

Dalam contoh ini, criteriaMatchadalah fungsi yang mengembalikan fungsi predikat yang cocok dengan yang diberikan criteria.

template:

<div ng-repeat="item in items | filter:criteriaMatch(criteria)">
  {{ item }}
</div>

cakupan:

$scope.criteriaMatch = function( criteria ) {
  return function( item ) {
    return item.name === criteria.name;
  };
};

Saya tidak akan menggunakan fungsi criteriaMatch ini dari html .. bagaimana saya akan memanggilnya dari dalam pengontrol apakah ini benar? $ filter ('filter') (array, function () {return criteriaMatch (item, criteria);});
user2368436

6
Jika Anda tidak menggunakannya di template Anda, menentukan filter tidak memberikan keuntungan apa pun. Anda dapat dengan mudah mendefinisikan fungsi javascript sederhana, karena lebih pendek di sana. Anda dapat menggunakan filtermetode asli dalam objek Array:array.filter(function(item){return item.name === criteria.name;})
Tosh

Saya memiliki fungsi javascript. hanya ingin memastikan bahwa angular tidak memiliki cara yang lebih mudah untuk melakukannya .. saya akan menerima jawaban Anda. Terima kasih.
user2368436

2

Berikut adalah contoh bagaimana Anda akan menggunakan filterdalam AngularJS JavaScript Anda (bukan dalam elemen HTML).

Dalam contoh ini, kami memiliki larik data Negara, masing-masing berisi nama dan kode ISO 3 karakter.

Kami ingin menulis fungsi yang akan mencari melalui daftar ini untuk sebuah record yang cocok dengan kode 3 karakter tertentu.

Inilah cara kami melakukannya tanpa menggunakan filter:

$scope.FindCountryByCode = function (CountryCode) {
    //  Search through an array of Country records for one containing a particular 3-character country-code.
    //  Returns either a record, or NULL, if the country couldn't be found.
    for (var i = 0; i < $scope.CountryList.length; i++) {
        if ($scope.CountryList[i].IsoAlpha3 == CountryCode) {
            return $scope.CountryList[i];
        };
    };
    return null;
};

Yup, tidak ada yang salah dengan itu.

Tapi begini tampilan fungsi yang sama, menggunakan filter:

$scope.FindCountryByCode = function (CountryCode) {
    //  Search through an array of Country records for one containing a particular 3-character country-code.
    //  Returns either a record, or NULL, if the country couldn't be found.

    var matches = $scope.CountryList.filter(function (el) { return el.IsoAlpha3 == CountryCode; })

    //  If 'filter' didn't find any matching records, its result will be an array of 0 records.
    if (matches.length == 0)
        return null;

    //  Otherwise, it should've found just one matching record
    return matches[0];
};

Jauh lebih rapi.

Ingatlah bahwa filtermengembalikan sebuah array sebagai hasil (daftar record yang cocok), jadi dalam contoh ini, kita ingin mengembalikan 1 record, atau NULL.

Semoga ini membantu.


0

Selain itu, jika Anda ingin menggunakan filter di pengontrol Anda dengan cara yang sama seperti yang Anda lakukan di sini:

<div ng-repeat="item in items | filter:criteriaMatch(criteria)">
  {{ item }}
</div>

Anda bisa melakukan sesuatu seperti:

var filteredItems =  $scope.$eval('items | filter:filter:criteriaMatch(criteria)');

6
Atau,var filteredItems = $filter('criteriaMatch')(items, criteria);
321zeno
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.