Jak korzystać z filtra w kontrolerze?

649

Napisałem funkcję filtrującą, która zwróci dane na podstawie przekazywanego argumentu. Chcę tę samą funkcjonalność w moim kontrolerze. Czy można ponownie użyć funkcji filtrowania w kontrolerze?

Do tej pory próbowałem:

function myCtrl($scope,filter1)
{ 
    // i simply used the filter function name, it is not working.
}
angularjs angular-filters ng-controller sumanth
źródło
2
lepsza odpowiedź: stackoverflow.com/questions/20131553/…
Raza Ahmed

Odpowiedzi:

1051

Wstrzyknij filtr $ do kontrolera

function myCtrl($scope, $filter)
{
}

Następnie, gdziekolwiek chcesz użyć tego filtra, użyj go w następujący sposób:

$filter('filtername');

Jeśli chcesz przekazać argumenty do tego filtra, zrób to, używając oddzielnych nawiasów:

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

Gdzie arg1jest tablica, na której chcesz filtrować, i arg2obiekt używany do filtrowania.

JSAddict
źródło
21
Przepraszam panie, nadal nie rozumiem. Czy możesz zrobić Jsfiddle, aby pokazać, jak zdefiniować treść funkcji filtra i jak jest ona wstawiana do pliku HTML?
gm2008
34
@ gm2008 możesz użyć filtru liczbowego, var anyNumber = $filter('number')(12.222222, 2);aby uzyskać 12.22.
vinesh
20
+ I za udzielenie odpowiedzi na pytanie… które brzmiało „Jak korzystać z filtra w kontrolerze?”
Shanimal
8
Przykład z $filter("currency")(price, "$", 2)wbudowanym filtrem „waluta”: Więc jeśli miałbyś cenę = 200, to wyrażenie zwróciłoby „200,00 $”.
Netsi1964
2
Odpowiedź @ pkozlowski.opensource jest lepsza, ponieważ zmniejsza „magiczne ciągi”. Jedna korzyść - co jeśli byłby to o wiele bardziej skomplikowany kontroler i nie udało się przetestować zastosowanego filtra? Nie zauważysz błędu, jeśli użyjesz $filter('filtter1')(2 t). Jednak jeśli wstrzykniesz filtter1FilterAngular natychmiast narzeka, że ​​zależność nie istnieje.
jkjustjoshing
253

Odpowiedź udzielona przez @Prashanth jest poprawna, ale istnieje jeszcze łatwiejszy sposób na zrobienie tego samego. Zasadniczo zamiast wstrzykiwać $filterzależność i używać niezręcznej składni wywoływania jej ( $filter('filtername')(arg1,arg2);), można wstrzykiwać zależność jako: nazwa filtra plus Filterprzyrostek.

Biorąc przykład z pytania, można napisać:

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

Należy zauważyć, że musisz dołączyć Filterdo nazwy filtra, bez względu na używaną konwencję nazewnictwa: do foo odwołuje się fooFilter
fooFilter jest wywoływany przez wywoływaniefooFilterFilter

pkozlowski.opensource
źródło
38
Jasne ... ale wciąż znajduję przypadek użycia, w którym chciałbyś wstrzyknąć 10 filtrów do jednej klasy ... Taka klasa prawdopodobnie naruszałaby zasadę pojedynczej odpowiedzialności ...
pkozlowski.opensource
10
Żeby wyjaśnić, że nie jest to „niezręczna” składnia JS… var fooFilter = $ filter ('foo'); fooFilter (arg1, arg2);
blindgaenger
13
@OZ_ co masz na myśli? Działa minimalizowanie lub nie. Minifikacja nie ma tu nic do roboty, zobacz ten wątek
pkozlowski.opensource
2
Jest to idealne rozwiązanie do korzystania z pojedynczego filtra, na który natrafiłem.
Matthew Fotzler,
2
+1 Myślę, że składnia $ filter ukrywa zależności, co prowadzi do mniej konserwowalnego kodu. Wtryskiwanie filtrów „statycznie” jest lepszym wyborem.
BiAiB,
79

Za pomocą poniższego przykładowego kodu możemy filtrować tablicę w sterowniku kątowym według nazwy. jest to oparte na poniższym opisie. 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
źródło
4
filterFilter (this.array, {name: 'Igor'}); is filterFilter słowo kluczowe lub to, co automatycznie odfiltrowało dane i dlaczego ['filterFilter', funkcja (filterFilter) {zdefiniowano tutaj! ?
suraj rawat
Plnkr z większą liczbą przykładów tej techniki: plnkr.co/edit/icFurX?p=preview
OzBob
Bardzo pomocny. Dzięki.
Kushal Jayswal
48

Oto inny przykład użycia filterw kontrolerze Angular:

$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.");

Proste, hej?

Mike Gledhill
źródło
6
Właśnie tego potrzebowałem, dzięki. Chociaż najwyraźniej nie o to chodzi w tym pytaniu. :)
pvgoran
38

Można to zrobić na trzy sposoby.

Załóżmy, że masz następujący prosty filtr, który konwertuje ciąg znaków na wielkie litery, z parametrem tylko dla pierwszego znaku.

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

Bezpośrednio przez $filter

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

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

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

});

Uwaga: daje to dostęp do wszystkich filtrów.

Przypisz $filterdovariable

Ta opcja pozwala korzystać z $filterpodobnych function.

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

    var uppercaseFilter = $filter('uppercase');

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

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

});

Załaduj tylko określony Filter

Możesz załadować tylko określony filtr, dodając nazwę filtra za pomocą Filter.

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

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

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

});

Który używasz, zależy od osobistych preferencji, ale zalecam użycie trzeciego, ponieważ jest to najbardziej czytelna opcja.

Jeffrey Roosendaal
źródło
15 
function ngController($scope,$filter){
    $scope.name = "aaaa";
    $scope.age = "32";

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

Nazwa drugiego argumentu metody kontrolera powinna brzmieć „$ filter”, wówczas tylko funkcjonalność filtra będzie działać z tym przykładem. W tym przykładzie użyłem filtra „małe litery”.

Ipog
źródło
12

Mam inny przykład, który stworzyłem dla mojego procesu:

Dostaję tablicę z opisem wartości w ten sposób

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

w moich plikach Filters.js:

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

Następnie test var (kontroler):

function myCtrl($scope, $filter) {
    // ....
    var resp = $filter('getState')('1', states);
    // ....
}
NtSpeed
źródło
Czy to zadziała w angularjs 1.0.8? bo nie działa dla mnie .. filtr $ nie jest zdefiniowany nawet po dodaniu tego w kontrolerze
shajin
7

AngularJs pozwala na stosowanie filtrów w szablonie lub w sterowniku, dyrektywie itp.

w szablonie możesz użyć tej składni

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

a wewnątrz kontrolera możesz użyć wstrzykiwania usługi $ filter

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

Jeśli potrzebujesz więcej z przykładem Demo, tutaj jest link

Przykłady filtrów i demo AngularJs

Hazarapet Tunanyan
źródło
podżeganie nie jest słowem. Masz na myśli iniekcję?
kevinc 15.04.17
oops.yea Mam na myśli iniekcję.
Hazarapet Tunanyan
6

Istnieje inny sposób oceny filtrów, który odzwierciedla składnię z widoków. Inwokacja jest owłosiona, ale można do niej zbudować skrót. Podoba mi się, że składnia łańcucha jest identyczna jak w widoku. Wygląda tak:

function myCtrl($scope, $interpolate) { 
  $scope.$eval($interpolate( "{{ myvar * 10 | currency }} dollars." ))
}
Prostota
źródło
To jest naprawdę bardzo przydatne!
DragonKnight
1
jest to fantastyczne, ponieważ pozwala mi przekazać ciąg znaków, który wygląda tak, jak w znacznikach.
kevinc
5

Wygląda na to, że nikt nie wspomniał, że można użyć funkcji jako arg2 w $ filter ('nazwa pliku') (arg1, arg2);

Na przykład: 

$scope.filteredItems = $filter('filter')(items, function(item){return item.Price>50;});
pavok
źródło
1

Użyj poniższego kodu, jeśli chcemy dodać wiele warunków zamiast pojedynczej wartości w filtrze kątowym javascript:

var modifiedArray = $filter('filter')(array,function(item){return (item.ColumnName == 'Value1' || item.ColumnName == 'Value2');},true)
Amay Kulkarni
źródło
1

Najpierw wstrzyknij filtr $ do swojego kontrolera, upewniając się, że ngSanitize jest załadowany w Twojej aplikacji, później użycie kontrolera jest następujące:

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

Zawsze sprawdź dokumenty angularjs

serdarsenay
źródło
1

jeśli chcesz filtrować obiekt w kontrolerze, spróbuj tego

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

Zwróci filtrowany obiekt zgodnie z warunkiem if

Code Spy
źródło
0

Ponowne użycie filtra Angular.js - Widok / Kontroler

To rozwiązanie obejmuje ponowne użycie filtrów kątowych. Co jest kolejnym sposobem filtrowania danych, a Google wylądował tutaj, gdy tego potrzebowałem; i lubię się dzielić.

Przypadek użycia

Jeśli już filtrujesz, powiedzmy w swoim powtórzeniu ng (jak poniżej), być może zdefiniowałeś filtr w kontrolerze w następujący sposób. Następnie możesz użyć ponownie, jak w końcowych przykładach.

Przykład użycia filtru - filtrowane powtórzenie w widoku

<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>

Przykład definicji filtra kątowego

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

Tak więc tutaj koncepcja polega na tym, że już używasz filtra utworzonego dla twojego widoku, a następnie zdajesz sobie sprawę, że chcesz go również użyć w kontrolerze.

Funkcja filtra Zastosowanie w kontrolerze Przykład 1

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

Funkcja filtra Zastosowanie w kontrolerze Przykład 2

Pokaż przycisk tylko wtedy, gdy nie znaleziono duplikatów, używając wcześniejszego filtra.

Przycisk HTML

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

Pokaż / ukryj przycisk

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

Niektórzy mogą uznać tę wersję filtrowania za łatwą i jest to opcja Angular.js.

Opcjonalny parametr komparatora „true” użyty w widoku i wywołaniu funkcji $ filter określa, że ​​chcesz mieć ścisłe porównanie. W przypadku pominięcia wartości można wyszukiwać w wielu kolumnach.

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

Greg
źródło