AngularJS özel filtre işlevi

Denetleyicimin içinde, bir dizi nesneyi filtrelemek istiyorum. Bu nesnelerin her biri, dizelerin yanı sıra listeleri içerebilen bir haritadır.

$filter('filter')(array, function)Biçimi kullanmayı denedim ama işlevimin içindeki dizinin tek tek öğelerine nasıl erişeceğimi bilmiyorum. İşte istediğimi göstermek için bir pasaj.

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

Ve sonra criteriaMatch(), münferit mülkün her birinin eşleşip eşleşmediğini kontrol edeceğim

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

Tüm bunları denetleyicide yapmalı ve bir liste listesi oluşturmalı ve bunları kapsamda ayarlamalıyım. Bu yüzden $filter('filter')sadece bu yoldan erişmem gerekiyor. Şimdiye kadar ağda bulduğum tüm örnekler, işlev içinde statik ölçüt aramalarına sahip, bir ölçüt nesnesini geçmiyor ve dizideki her bir öğeye karşı test ediyorlar.

Bunu şu şekilde kullanabilirsiniz: http://plnkr.co/edit/vtNjEgmpItqxX5fdwtPi?p=preview

Sizin de bulduğunuz gibi, filterdiziden öğe öğe kabul eden yüklem işlevini kabul eder. Yani, verilene dayalı olarak bir yüklem işlevi oluşturmanız yeterlidir criteria.

Bu örnekte, criteriaMatchverilenle eşleşen bir yüklem işlevi döndüren bir işlevdir criteria.

şablon:

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

dürbün:

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

filterAngularJS JavaScript'inizde (bir HTML öğesi yerine) nasıl kullanacağınıza dair bir örnek aşağıda verilmiştir .

Bu örnekte, her biri bir ad ve 3 karakterli bir ISO kodu içeren bir Ülke kayıtları dizimiz var.

Belirli bir 3 karakterli kodla eşleşen bir kaydı bu listede arayacak bir işlev yazmak istiyoruz.

Burada yapardım nasıl olmadan kullanarak 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;
};

Evet, bunda yanlış bir şey yok.

Ancak aynı işlev şu şekilde görünür 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];
};

Çok daha düzgün.

filterSonuç olarak bir dizi döndürdüğünü unutmayın (eşleşen kayıtların listesi), bu nedenle bu örnekte ya 1 kayıt ya da NULL döndürmek isteyeceğiz.

Bu yardımcı olur umarım.

Ayrıca, denetleyicinizdeki filtreyi burada yaptığınız gibi kullanmak istiyorsanız:

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

Şunun gibi bir şey yapabilirsiniz:

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