Comment utiliser un filtre dans un contrôleur?

649

J'ai écrit une fonction de filtre qui retournera des données basées sur l'argument que vous passez. Je veux la même fonctionnalité dans mon contrôleur. Est-il possible de réutiliser la fonction de filtre dans un contrôleur?

Voici ce que j'ai essayé jusqu'à présent:

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

Réponses:

1051

Injectez $ filter sur votre contrôleur

function myCtrl($scope, $filter)
{
}

Ensuite, partout où vous souhaitez utiliser ce filtre, utilisez-le simplement comme ceci:

$filter('filtername');

Si vous souhaitez passer des arguments à ce filtre, faites-le en utilisant des parenthèses distinctes:

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

Où se arg1trouve le tableau sur lequel vous souhaitez filtrer et arg2l'objet utilisé pour filtrer.

— JSAddict
source
21
Désolé, monsieur, je ne comprends toujours pas. Pourriez-vous éventuellement faire un Jsfiddle pour montrer comment définir le corps de la fonction de filtre et comment il est inséré dans le fichier HTML?
— gm2008
34
@ gm2008 vous pouvez utiliser le filtre numérique comme var anyNumber = $filter('number')(12.222222, 2);pour obtenir 12.22.
— vinesh
20
+ J'ai répondu à la question ... qui était "Comment utiliser un filtre dans un contrôleur?"
— Shanimal
8
Un exemple avec le filtre intégré "devise": $filter("currency")(price, "$", 2)Donc, si vous aviez un prix = 200, cette expression retournerait "200,00 $".
— Netsi1964
2
La réponse de @ pkozlowski.opensource est meilleure que cela car elle réduit les "cordes magiques". Un avantage - et si c'était dans un contrôleur beaucoup plus complexe et que vous n'aviez pas réussi à tester le filtre utilisé? Vous ne remarquerez pas l'erreur si vous utilisez $filter('filtter1')(2 t). Cependant, si vous injectez filtter1FilterAngular , vous vous plaindrez immédiatement que la dépendance n'existe pas.
— jkjustjoshing
253

La réponse fournie par @Prashanth est correcte, mais il existe un moyen encore plus simple de faire de même. Fondamentalement, au lieu d'injecter la $filterdépendance et d'utiliser une syntaxe maladroite pour l'invoquer ( $filter('filtername')(arg1,arg2);), on peut injecter la dépendance étant: le nom du filtre plus le Filtersuffixe.

Prenant l'exemple de la question, on pourrait écrire:

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

Il convient de noter que vous devez ajouter Filterau nom du filtre, quelle que soit la convention de dénomination que vous utilisez: foo est référencé en appelant fooFilter
fooFilter est référencé en appelantfooFilterFilter

— pkozlowski.opensource
source
38
Bien sûr .. mais je suis toujours à trouver un cas d'utilisation où vous souhaitez injecter 10 filtres dans une classe ... Une telle classe violerait probablement le principe de la responsabilité unique ...
— pkozlowski.opensource
10
Juste pour être clair, que ce n'est pas une syntaxe JS "maladroite" ... var fooFilter = $ filter ('foo'); fooFilter (arg1, arg2);
— blindgaenger
13
@OZ_ que voulez-vous dire? Ça marche la minification ou pas. La minification n'a rien à voir ici, voir ce plunk
— pkozlowski.opensource
2
C'est idéal pour utiliser un seul filtre, ce qui est le cas que j'ai rencontré.
— Matthew Fotzler
2
+1 Je pense que la syntaxe $ filter masque les dépendances, ce qui conduit à un code moins facile à maintenir. L'injection "statique" de filtres est un meilleur choix.
— BiAiB
79

En utilisant l'exemple de code suivant, nous pouvons filtrer le tableau dans le contrôleur angulaire par nom. ceci est basé sur la description suivante. http://docs.angularjs.org/guide/filter

this.filteredArray = filterFilter (this.array, {nom: '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
source
4
filterFilter (this.array, {nom: 'Igor'}); filterFilter est-il un mot-clé ou ce qu'il a automatiquement filtré les données et pourquoi ['filterFilter', fonction (filterFilter) {défini ici! ?
— suraj rawat
Un Plnkr avec plus d'exemples de cette technique: plnkr.co/edit/icFurX?p=preview
— OzBob
Très utile. Merci.
— Kushal Jayswal
48

Voici un autre exemple d'utilisation filterdans un contrôleur angulaire:

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

C'est simple, hein?

— Mike Gledhill
source
6
C'est exactement ce dont j'avais besoin, merci. Mais apparemment, ce n'est pas de cela qu'il s'agit. :)
— pvgoran
38

Il existe trois façons possibles de procéder.

Supposons que vous ayez le filtre simple suivant, qui convertit une chaîne en majuscules, avec un paramètre pour le premier caractère uniquement.

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

Directement à travers $filter

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

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

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

});

Remarque: cela vous donne accès à tous vos filtres.

Attribuer $filterà unvariable

Cette option vous permet d'utiliser la $filtermême chose a function.

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

    var uppercaseFilter = $filter('uppercase');

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

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

});

Charger seulement un spécifique Filter

Vous pouvez charger uniquement un filtre spécifique en ajoutant le nom du filtre avec Filter.

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

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

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

});

Lequel vous utilisez vient à la préférence personnelle, mais je recommande d'utiliser le troisième, car c'est l'option la plus lisible.

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

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

Le nom du deuxième argument de la méthode du contrôleur doit être "$ filter", alors seule la fonctionnalité de filtrage fonctionnera avec cet exemple. Dans cet exemple, j'ai utilisé le filtre "minuscule".

— Ipog
source
12

J'ai un autre exemple, que j'ai fait pour mon processus:

Je reçois un tableau avec une description de valeur comme celle-ci

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

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

Ensuite, un test var (contrôleur):

function myCtrl($scope, $filter) {
    // ....
    var resp = $filter('getState')('1', states);
    // ....
}
— NtSpeed
source
Est-ce que cela fonctionnera dans angularjs 1.0.8 ?? parce que son ne fonctionne pas pour moi .. dit que le filtre $ n'est pas défini même après avoir ajouté cela dans le contrôleur
— shajin
7

AngularJs vous permet d'utiliser des filtres à l'intérieur du modèle ou à l'intérieur du contrôleur, de la directive, etc.

dans le modèle, vous pouvez utiliser cette syntaxe

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

et à l'intérieur du contrôleur, vous pouvez utiliser l'injection du service de filtre $

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

Si vous avez besoin de plus avec l'exemple de démonstration, voici un lien

Exemples de filtres AngularJs et démo

— Hazarapet Tunanyan
source
inceting n'est pas un mot. Voulez-vous dire l'injection?
— kevinc
oops.yea je veux dire l'injection.
— Hazarapet Tunanyan
6

Il existe une autre façon d'évaluer les filtres qui reflète la syntaxe des vues. L'invocation est velue mais vous pouvez lui créer un raccourci. J'aime que la syntaxe de la chaîne soit identique à celle que vous auriez dans une vue. Ressemble à ça:

function myCtrl($scope, $interpolate) { 
  $scope.$eval($interpolate( "{{ myvar * 10 | currency }} dollars." ))
}
— SimplGy
source
C'est vraiment très utile!
— DragonKnight
1
c'est fantastique car cela me permet de passer une chaîne qui ressemble à celle du balisage.
— kevinc
5

Il semble que personne n'ait mentionné que vous pouvez utiliser une fonction comme arg2 dans $ filter ('filtername') (arg1, arg2);

Par exemple: 

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

Utilisez le code ci-dessous si nous voulons ajouter plusieurs conditions, au lieu d'une seule valeur dans le filtre angulaire javascript:

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

si vous voulez filtrer un objet dans le contrôleur, essayez ceci

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

Cela retournera un objet filtré selon la condition if

— Code Spy
source
0

Réutilisation d'un filtre Angular.js - Vue / Contrôleur

Cette solution couvre la réutilisation des filtres angulaires. Ce qui est encore une autre façon de filtrer les données, et Google m'a atterri ici quand j'en avais besoin; et j'aime partager.

Cas d'utilisation

Si vous filtrez déjà, disons dans une répétition ng dans votre vue (comme ci-dessous), alors vous pourriez avoir défini un filtre dans le contrôleur comme suit. Et puis vous pouvez réutiliser comme dans les exemples finaux.

Exemple d'utilisation du filtre - Répétition filtrée dans la vue

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

Exemple de définition de filtre angulaire

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

Ainsi, le concept ici est que vous utilisez déjà un filtre créé pour votre vue, puis réalisez que vous souhaitez également l'utiliser dans votre contrôleur.

Utilisation de la fonction de filtre dans le contrôleur Exemple 1

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

Utilisation de la fonction de filtre dans le contrôleur Exemple 2

Afficher un bouton uniquement si aucun doublon n'est trouvé, en utilisant le filtre précédent.

Bouton HTML

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

Bouton Afficher / Masquer

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

Certains peuvent trouver cette version de filtrage facile, et c'est une option Angular.js.

Le paramètre de comparaison facultatif "true" utilisé dans la vue et dans l'appel de fonction $ filter spécifie que vous voulez une comparaison stricte. Si vous omettez, les valeurs peuvent être recherchées sur plusieurs colonnes.

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

— Greg
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.