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.
}
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);
}
où arg1 est le tableau sur lequel vous voulez filtrer et arg2 est l'objet utilisé pour filtrer.
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
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>
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 ?
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.
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".
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);
// ....
}
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
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." ))
}
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;});
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
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)
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)