web-dev-qa-db-fra.com

Comment utiliser un filtre dans un contrôleur?

J'ai écrit une fonction de filtrage qui renverra des données en fonction de l'argument que vous transmettez. 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.
}
angularjsangular-filtersng-controller
630
sumanth

Injecter $ filter à votre contrôleur

function myCtrl($scope, $filter)
{
}

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

$filter('filtername');

Si vous voulez passer des arguments à ce filtre, utilisez des parenthèses séparées:

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

Où arg1 est le tableau que vous souhaitez filtrer et arg2 est l'objet utilisé pour filtrer.

1032
JSAddict

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 dépendance $filter et d’utiliser une syntaxe peu commode pour l’appeler ($filter('filtername')(arg1,arg2);), on peut injecter une dépendance sous la forme suivante: nom du filtre plus suffixe Filter.

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, quelle que soit la convention de dénomination utilisée: foo est référencé en appelant fooFilter.
fooFilter est référencé en appelant fooFilterFilter

247
pkozlowski.opensource

En utilisant l'exemple de code suivant, nous pouvons filtrer le tableau dans le contrôleur angular par 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>
78
aamir sajjad

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

Simple, hé?

47
Mike Gledhill

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

Supposons que vous ayez le filtre simple suivant, qui convertit une chaîne en majuscule, 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 par $filter

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

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

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

});

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

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

});

Charge seulement un Filter spécifique

Vous pouvez uniquement charger 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);

});

Laquelle que vous utilisez correspond à vos préférences personnelles, mais je vous recommande d’utiliser la troisième, car c’est l’option la plus lisible.

34
Jeffrey Roosendaal
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", seule la fonctionnalité de filtre fonctionnera avec cet exemple. Dans cet exemple, j'ai utilisé le filtre "minuscule".

15
Ipog

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

Je reçois un tableau avec value-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
NtSpeed

AngularJs vous permet d’utiliser des filtres dans un modèle ou dans un contrôleur, une 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 $ filter 

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 et démo AngularJs

7
Hazarapet Tunanyan

Il existe un autre moyen d'évaluer les filtres qui reflètent la syntaxe à partir des vues. L'invocation est poilue 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." ))
}
6
SimplGy

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

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

2
AVH

Utilisez le code ci-dessous si vous souhaitez ajouter plusieurs conditions, au lieu d'une valeur unique dans javascript angular filter:

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

Commencez par injecter $ filter sur votre contrôleur, en vous assurant que ngSanitize est chargé dans votre application, puis dans l'utilisation du contrôleur, procédez comme suit:

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

Consultez toujours les documents angularjs

1
serdarsenay

si vous voulez objet filtre 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 l'objet filtré selon si condition

0
Code Spy