Question Comment utiliser un filtre dans un contrôleur?


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?

C'est ce que j'ai essayé jusqu'ici:

function myCtrl($scope,filter1)
{ 
    // i simply used the filter function name, it is not working.
}

614
2018-01-13 09:29


origine


Réponses:


Injecter Filtre $ à votre contrôleur

function myCtrl($scope, $filter)
{
}

Ensuite, 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 que vous voulez filtrer et arg2 est l'objet utilisé pour filtrer.


996
2018-01-13 09:42



Réponse fournie par @Prashanth est correcte, mais il est encore plus facile de faire la même chose. Fondamentalement, au lieu d'injecter le $filter dépendance et en utilisant la syntaxe maladroite de l'invoquer ($filter('filtername')(arg1,arg2);) on peut injecter la dépendance étant: le nom du filtre plus le Filter suffixe.

Prenant exemple de la question on pourrait écrire:

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

Il convient de noter que vous devez ajouter Filter au nom du filtre, quelle que soit la convention d'attribution de noms que vous utilisez: foo est référencé en appelant fooFilter
fooFilter est référencé en appelant fooFilterFilter


242
2018-01-13 12:19



En utilisant l'exemple de code 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

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>

76
2018-03-28 04:22



Voici un autre exemple d'utilisation 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, hé?


44
2017-09-09 12:22



Il y a trois façons de le faire.

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

});

Note: cela vous donne accès à tout 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);

});

Charger seulement un spécifique Filter

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

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

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

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

});

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


32
2018-02-16 15:43



function ngController($scope,$filter){
    $scope.name = "aaaa";
    $scope.age = "32";

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

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


15
2017-11-16 03:18



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

Je reçois un tableau avec une valeur-Description comme ça

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

dans mon 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);
    // ....
}

12
2018-05-28 18:18



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 de la Filtre $ un service

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


7
2018-05-17 18:00



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

function myCtrl($scope, $interpolate) { 
  $scope.$eval($interpolate( "{{ myvar * 10 | currency }} dollars." ))
}

6
2018-03-21 17:35



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

3
2018-06-08 14:09