Comment utiliser un filtre dans un contrôleur?

j'ai écrit une fonction de filtre qui retournera les 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?

c'est Ce que j'ai essayé jusqu'à présent:

function myCtrl($scope,filter1)
{ 
    // i simply used the filter function name, it is not working.
}
620
demandé sur Damjan Pavlica 2013-01-13 13:29:54

13 réponses

Injecter $filtre à votre contrôleur

function myCtrl($scope, $filter)
{
}

alors où que vous vouliez utiliser ce filtre, utilisez-le comme ceci:

$filter('filtername');

si vous voulez passer des arguments à ce filtre, faites-le en utilisant des parenthèses séparées:

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

arg1 est le tableau sur lequel vous voulez filtrer et arg2 est l'objet utilisé pour filtrer.

1007
répondu Prashanth Suriyanarayanan 2017-07-28 10:57:03

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

en prenant exemple de la question on pourrait écrire:

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

il est à noter que vous devez ajouter Filter au nom du filtre, non peu importe la convention de nommage que vous utilisez: foo est référencé en appelant fooFilter

footfilter est référencé en appelant fooFilterFilter

244
répondu pkozlowski.opensource 2015-05-08 08:32:13

en utilisant le code d'échantillon suivant nous pouvons filtrer le tableau dans le contrôleur angulaire par son nom. ceci est basé sur la description suivante. http://docs.angularjs.org/guide/filter

.filteredArray = filterFilter (this.tableau, {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>
77
répondu aamir sajjad 2016-04-21 16:15:58

voici un autre exemple d'utilisation de filter dans 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.");

Simple, hein ?

45
répondu Mike Gledhill 2015-09-09 12:22:21

il y a trois façons possibles de le faire.

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

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

directement par $filter

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

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

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

});

Note: Ceci vous donne accès à tous vos filtres.


attribuer $filter à un variable

"

Cette option vous permet d'utiliser le $filter comme un function .

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

    var uppercaseFilter = $filter('uppercase');

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

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

});

ne Charger qu'une charge spécifique Filter

, Vous pouvez charger qu'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);

});

" celui que vous utilisez vient à la préférence personnelle, mais je recommande d'utiliser la troisième, parce que c'est l'option la plus lisible.

33
répondu Jeffrey Roosendaal 2017-06-16 08:36:24
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 controller doit être" $filter " alors seule la fonctionnalité filter fonctionnera avec cet exemple. Dans cet exemple, j'ai utilisé le filtre "minuscules".

15
répondu Ipog 2014-11-16 03:18:50

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

j'obtiens un tableau avec la valeur-Description comme ceci

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

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

puis, un var d'essai (contrôleur):

function myCtrl($scope, $filter) {
    // ....
    var resp = $filter('getState')('1', states);
    // ....
}
12
répondu NtSpeed 2014-02-03 15:34:53

AngularJs vous permet d'utiliser des filtres à l'intérieur de template ou à l'intérieur de Controller, Directive, etc..

dans le modèle, vous pouvez utiliser cette syntaxe

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

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

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

si vous avez besoin de plus avec Demo exemple voici un lien

AngularJs exemples de filtres et démo

7
répondu Hazarapet Tunanyan 2017-04-15 19:45:56

il y a une autre façon d'évaluer les filtres qui reflètent la syntaxe des vues. L'invocation est poilue mais vous pouvez créer un raccourci. J'aime que la syntaxe de la chaîne soit identique à celle d'une vue. On dirait:

function myCtrl($scope, $interpolate) { 
  $scope.$eval($interpolate( "{{ myvar * 10 | currency }} dollars." ))
}
6
répondu SimplGy 2014-03-21 17:35:13

il semble que personne n'a 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;});
4
répondu pavok 2017-06-08 14:09:33

exemple de date Simple utilisant $filter dans un contrôleur serait:

var myDate = new Date();
$scope.dateAsString = $filter('date')(myDate, "yyyy-MM-dd"); 

comme expliqué ici - https://stackoverflow.com/a/20131782/262140

1
répondu AVH 2017-05-23 12:26:34

utilisez le code ci-dessous si vous voulez 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)
1
répondu Amay Kulkarni 2017-11-29 10:16:20

tout d'abord injecter $filter à votre contrôleur, en s'assurant que ngSanitize est chargé dans votre application, plus tard dans l'utilisation du contrôleur est comme suit:

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

toujours vérifier les documents angularjs

1
répondu serdarsenay 2018-03-07 03:38:12