Bir denetleyicide filtre nasıl kullanılır?

649

Verdiğiniz argümana dayanarak veri döndürecek bir filtre işlevi yazdım. Denetleyicimde de aynı işlevi istiyorum. Filtre işlevini bir denetleyicide yeniden kullanmak mümkün müdür?

Şimdiye kadar denedim:

function myCtrl($scope,filter1)
{ 
    // i simply used the filter function name, it is not working.
}
angularjs  angular-filters  ng-controller 
— sumanth
kaynak
2
— Raza Ahmed

Yanıtlar:

1051

Denetleyicinize $ filtre enjekte edin

function myCtrl($scope, $filter)
{
}

Ardından, bu filtreyi kullanmak istediğiniz her yerde, şu şekilde kullanın:

$filter('filtername');

Bu filtreye bağımsız değişkenler iletmek istiyorsanız, bunu ayrı parantezler kullanarak yapın:

function myCtrl($scope, $filter)
{
    $filter('filtername')(arg1,arg2);
}

arg1Filtrelemek istediğiniz dizi nerede ve filtrelemek için arg2kullanılan nesne.

— JSAddict
kaynak
21
Üzgünüm, efendim, hala anlamıyorum. Filtre işlev gövdesinin nasıl tanımlanacağını ve HTML dosyasına nasıl eklendiğini göstermek için bir Jsfiddle yapabilir misiniz?
— gm2008
34
@ gm2008 var anyNumber = $filter('number')(12.222222, 2);almak gibi numara filtresi kullanabilirsiniz 12.22.
— vinesh
20
+ Soruyu cevapladığım için ... "Denetleyicide filtre nasıl kullanılır?"
— Shanimal
8
Filtrede "para birimi" oluşturma örneği: $filter("currency")(price, "$", 2)= 200 değeriniz varsa, bu ifade "200,00 $" değerini döndürür.
— Netsi1964
2
@ Pkozlowski.opensource'un cevabı bundan daha iyidir çünkü “sihirli telleri” azaltır. Bir yararı - ya çok daha karmaşık bir denetleyicide olsaydı ve kullanılan filtreyi birim testinde başarısız olsaydınız? $filter('filtter1')(2 t) kullanırsanız hatayı fark etmezsiniz. Bununla birlikte, Angular'ı enjekte ederseniz filtter1Filter, bağımlılığın mevcut olmadığından hemen şikayet edecektir.
— jkjustjoshing
253

@Prashanth tarafından verilen cevap doğrudur, ancak bunu yapmanın daha kolay bir yolu vardır. Temel olarak $filterbağımlılığı enjekte etmek ve onu çağırmanın garip sözdizimini ( $filter('filtername')(arg1,arg2);) kullanmak yerine, bağımlılık enjekte edilebilir: filtre adı artı Filtersonek.

Sorudan örnek alındığında şöyle yazılabilir:

function myCtrl($scope, filter1Filter) { 
  filter1Filter(input, arg1);
}

FilterHangi adlandırma kuralını kullanırsanız kullanın, filtre adına eklemeniz gerektiğine dikkat edilmelidir : fooFilter
foo'ya başvurularak fooFilter çağrılarak başvurulurfooFilterFilter

— pkozlowski.opensource
kaynak
38
Tabii .. ama yine de bir sınıfa 10 filtre enjekte etmek istediğiniz bir kullanım durumu buluyorum ... Böyle bir sınıf muhtemelen tek sorumluluk ilkesini ihlal edecektir ...
— pkozlowski.opensource
10
Açıkça söylemek gerekirse, bunun "garip" JS sözdizimi olmadığı var ... var fooFilter = $ filter ('foo'); fooFilter (arg1, arg2);
— blindgaenger
13
@OZ_ ne demek istiyorsun? Minimizasyon olsun ya da olmasın. Minimasyonun burada yapacak bir şeyi yok, şu kütleye
— pkozlowski.opensource 14:13
2
Bu, karşılaştığım tek bir filtre kullanmak için idealdir.
— Matthew Fotzler
2
+1 Bence $ filter sözdizimi bağımlılıkları gizler, böylece daha az bakım yapılabilir koda yol açar. Filtreleri "statik olarak" enjekte etmek daha iyi bir seçimdir.
— BiAiB
79

Aşağıdaki örnek kodu kullanarak, açısal denetleyicideki diziyi ada göre filtreleyebiliriz. bu aşağıdaki açıklamaya dayanmaktadır. http://docs.angularjs.org/guide/filter

this.filteredArray = filterFilter (this.array, {name: 'Igor'});

JS:

 angular.module('FilterInControllerModule', []).
    controller('FilterController', ['filterFilter', function(filterFilter) {
      this.array = [
        {name: 'Tobias'},
        {name: 'Jeff'},
        {name: 'Brian'},
        {name: 'Igor'},
        {name: 'James'},
        {name: 'Brad'}
      ];
      this.filteredArray = filterFilter(this.array, {name:'Igor'});
    }]);

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example96-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.3/angular.min.js"></script>
  <script src="script.js"></script>



</head>
<body ng-app="FilterInControllerModule">
    <div ng-controller="FilterController as ctrl">
    <div>
      All entries:
      <span ng-repeat="entry in ctrl.array">{{entry.name}} </span>
    </div>
    <div>
      Filter By Name in angular controller
      <span ng-repeat="entry in ctrl.filteredArray">{{entry.name}} </span>
    </div>
  </div>
</body>
</html>
— aamir sajjad
kaynak
4
filterFilter (this.array, {name: 'Igor'}); filterFilter bir anahtar kelimedir veya verileri otomatik olarak filtrelediğidir ve neden ['filterFilter', işlev (filterFilter) {burada tanımlanmıştır! ?
— suraj rawat
Bu tekniğin daha fazla örneğini içeren bir Plnkr: plnkr.co/edit/icFurX?p=preview
— OzBob
Çok yararlı. Teşekkürler.
— Kushal Jayswal
48

filterAçısal denetleyicide kullanım için başka bir örnek :

$scope.ListOfPeople = [
    { PersonID: 10, FirstName: "John", LastName: "Smith", Sex: "Male" },
    { PersonID: 11, FirstName: "James", LastName: "Last", Sex: "Male" },
    { PersonID: 12, FirstName: "Mary", LastName: "Heart", Sex: "Female" },
    { PersonID: 13, FirstName: "Sandra", LastName: "Goldsmith", Sex: "Female" },
    { PersonID: 14, FirstName: "Shaun", LastName: "Sheep", Sex: "Male" },
    { PersonID: 15, FirstName: "Nicola", LastName: "Smith", Sex: "Male" }
];

$scope.ListOfWomen = $scope.ListOfPeople.filter(function (person) {
    return (person.Sex == "Female");
});

//  This will display "There are 2 women in our list."
prompt("", "There are " + $scope.ListOfWomen.length + " women in our list.");

Basit, hey?

— Mike Gledhill
kaynak
6
Tam da ihtiyacım olan şey bu, teşekkürler. Görünüşe göre sorunun konusu bu değil . :)
— pvgoran
38

Bunu yapmanın üç olası yolu vardır.

Diyelim ki, bir dizeyi büyük harfe dönüştüren, sadece ilk karakter için bir parametreyle basit filtreye sahip olduğunuzu varsayalım.

app.filter('uppercase', function() {
    return function(string, firstCharOnly) {
        return (!firstCharOnly)
            ? string.toUpperCase()
            : string.charAt(0).toUpperCase() + string.slice(1);
    }
});

Doğrudan üzerinden $filter

app.controller('MyController', function($filter) {

    // HELLO
    var text = $filter('uppercase')('hello');

    // Hello
    var text = $filter('uppercase')('hello', true);

});

Not: Bu, tüm filtrelerinize erişmenizi sağlar .

Atama $filtera kadarvariable

Bu seçenek kullanmanızı sağlar $filterbir benzeri function.

app.controller('MyController', function($filter) {

    var uppercaseFilter = $filter('uppercase');

    // HELLO
    var text = uppercaseFilter('hello');

    // Hello
    var text = uppercaseFilter('hello', true);

});

Yalnızca belirli bir yükleme Filter

Filtre adını ekleyerek yalnızca belirli bir filtreyi yükleyebilirsiniz Filter.

app.controller('MyController', function(uppercaseFilter) {

    // HELLO
    var text = uppercaseFilter('hello');

    // Hello
    var text = uppercaseFilter('hello', true);

});

Hangisini kullandığınız kişisel tercihinize bağlıdır, ancak üçüncü olanı kullanmanızı öneririm, çünkü en okunabilir seçenek.

— Jeffrey Roosendaal
kaynak
15 
function ngController($scope,$filter){
    $scope.name = "aaaa";
    $scope.age = "32";

     $scope.result = function(){
        return $filter('lowercase')($scope.name);
    };
}

Denetleyici yöntemi 2. bağımsız değişken adı "$ filter" olmalıdır, bu durumda yalnızca filtre işlevselliği çalışır. Bu örnekte "küçük harf" Filtresi kullandım.

— Ipog
kaynak
12

İşlemim için yaptığım başka bir örneğim var:

Bunun gibi değer açıklaması içeren bir dizi alıyorum

states = [{
    status: '1',
    desc: '\u2713'
}, {
    status: '2',
    desc: '\u271B'
}]

benim Filters.js'de:

.filter('getState', function () {
    return function (input, states) {
        //console.log(states);
        for (var i = 0; i < states.length; i++) {
            //console.log(states[i]);
            if (states[i].status == input) {
                return states[i].desc;
            }
        }
        return '\u2718';
    };
})

Sonra bir test var (kontrolör):

function myCtrl($scope, $filter) {
    // ....
    var resp = $filter('getState')('1', states);
    // ....
}
— NtSpeed
kaynak
Bu angularjs 1.0.8 çalışacak mı ?? coz onun benim için çalışmıyor .. denetleyicide ekledikten sonra bile $ filtre tanımlanmadı
— shajin
7

AngularJs, şablonun içinde veya Denetleyici, Yönerge vb. İçindeki filtreleri kullanmanızı sağlar.

şablonda bu sözdizimini kullanabilirsiniz

{{ variable | MyFilter: ... : ... }}

ve denetleyicinin içinde $ filter hizmetini enjekte ederek kullanabilirsiniz

angular.module('MyModule').controller('MyCtrl',function($scope, $filter){
    $filter('MyFilter')(arg1, arg2);
})

Demo örneğiyle daha fazlasına ihtiyacınız varsa işte bir bağlantı

AngularJs filtre örnekleri ve demo

— Hazarapet Tunanyan
kaynak
kışkırtmak bir kelime değildir. Enjeksiyon mu demek istiyorsun?
— kevinc
oops.yea Enjekte etmek istiyorum.
— Hazarapet Tunanyan
6

Sözdizimini görünümlerden yansıtan filtreleri değerlendirmenin başka bir yolu daha vardır. Çağırma kıllı ama buna bir kısayol oluşturabilirsiniz. Dizenin sözdiziminin bir görünümde sahip olduğunuzla aynı olmasını seviyorum. Buna benzer:

function myCtrl($scope, $interpolate) { 
  $scope.$eval($interpolate( "{{ myvar * 10 | currency }} dollars." ))
}
— SimplGy
kaynak
Bu aslında çok faydalı!
— DragonKnight
1
Bu, işaretlemede olduğu gibi görünen bir dize geçirmeme izin verdiği için harika.
— kevinc
5

Görünüşe göre hiç kimse $ filter ('filtername') (arg1, arg2) içinde arg2 olarak bir fonksiyon kullanabileceğinizi söylemedi .

Örneğin: 

$scope.filteredItems = $filter('filter')(items, function(item){return item.Price>50;});
— pavok
kaynak
1

Javascript açısal filtresinde tek bir değer yerine birden çok koşul eklemek istiyorsak aşağıdaki kodu kullanın:

var modifiedArray = $filter('filter')(array,function(item){return (item.ColumnName == 'Value1' || item.ColumnName == 'Value2');},true)
— Amay Kulkarni
kaynak
1

Her şeyden önce, ngSanitize uygulamasının uygulamanıza yüklendiğinden emin olmak için denetleyicinize $ filter enjekte edin, daha sonra denetleyici kullanımında aşağıdaki gibidir:

$filter('linky')(text, target, attributes)

Her zaman angularjs belgelerine göz atın

— serdarsenay
kaynak
1

denetleyicideki nesneyi filtrelemek istiyorsanız bunu deneyin

var rateSelected = $filter('filter')($scope.GradeList, function (obj) {
                        if(obj.GradeId == $scope.contractor_emp.save_modal_data.GradeId)
                        return obj;
                });

Bu, filtrelenmiş nesneyi if durumuna göre döndürür

— Kod Casusu
kaynak
0

Angular.js Filtresini Yeniden Kullanma - Görüntüle / Denetleyici

Bu Çözüm Açısal Filtrelerin tekrar kullanılmasını kapsamaktadır. Bu da verileri filtrelemenin başka bir yoludur ve Google, ihtiyaç duyduğumda beni buraya indirdi; ve paylaşmayı seviyorum.

Kullanım Durumu

Zaten filtreliyorsanız, görünümünüzde bir tekrarlayın (aşağıdaki gibi), daha sonra aşağıdaki gibi denetleyicide bir filtre tanımlamış olabilirsiniz. Ve son örneklerde olduğu gibi tekrar kullanabilirsiniz.

Filtre Kullanım Örneği - Görünümde Filtrelenen Tekrar

<div ng-app="someApp" ng-controller="someController">
    <h2>Duplicates</h2>
    <table class="table table-striped table-light table-bordered-light">
        <thead>
            <tr>
                <th>Name</th>
                <th>Gender</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="person in data | filter: searchDuplicate:true">
                <td>{{person.name}}</td>
                <td>{{person.gender}}</td>
            </tr>
        </tbody>
    </table>
</div>

Açısal Filtre Tanım Örneği

angular.module('someApp',[])
.controller('someController', function($scope, $filter ) {

    $scope.people = [{name: 'Bob', gender: 'male'  , hasDuplicate: true },
                     {name: 'Bob', gender: 'male'  , hasDuplicate: true },
                     {name: 'Bob', gender: 'female', hasDuplicate: false}];

    $scope.searchDuplicate = { hasDuplicate : true };
})

Yani, buradaki kavram, zaten görünümünüz için oluşturulan bir filtre kullandığınız ve daha sonra da kontrol cihazınızda kullanmak istediğinizi fark ettiğinizdir.

Filtre Fonksiyonu Kontrolör İçinde Kullanım Örnek 1

var dup = $filter('filter')($scope.people, $scope.searchDuplicate, true)

Filtre İşlevi Denetleyici İçinde Kullanım Örnek 2

Bir Düğmeyi yalnızca önceki filtreyi kullanarak herhangi bir kopya bulunmazsa gösterin.

Html Düğmesi

<div ng-if="showButton()"><button class="btn btn-primary" ng-click="doSomething();"></button></div>

Göster / Gizle Düğmesi

$scope.doSomething = function(){ /* ... */ };
$scope.showButton = function(){ return $filter('filter')($scope.people, $scope.searchDuplicate, true).length == 0; };

Bazıları filtrelemenin bu sürümünü kolay bulabilir ve bu bir Angular.js seçeneğidir.

Görünümde ve $ filter işlev çağrısında kullanılan isteğe bağlı karşılaştırıcı parametresi "true", katı bir karşılaştırma istediğinizi belirtir. Atlarsanız, değerler birden çok sütun üzerinde aranabilir.

https://docs.angularjs.org/api/ng/filter/filter

— Greg
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.