Comment appeler un filtre Angular.js avec plusieurs arguments?

297

À partir de la documentation , nous pouvons appeler un filtre tel que date comme ceci:

{{ myDateInScope | date: 'yyyy-MM-dd' }}

Ici, la date est un filtre qui prend un argument.

Quelle est la syntaxe pour appeler des filtres avec plus de paramètres à la fois à partir de modèles et de code JavaScript?

nh2
la source

Réponses:

621

Dans les modèles, vous pouvez séparer les arguments de filtre par deux-points .

{{ yourExpression | yourFilter: arg1:arg2:... }}

De Javascript, vous l'appelez comme

$filter('yourFilter')(yourExpression, arg1, arg2, ...)

Il y a en fait un exemple caché dans les documents du filtre orderBy .


Exemple:

Disons que vous créez un filtre qui peut remplacer les choses par des expressions régulières:

myApp.filter("regexReplace", function() { // register new filter

  return function(input, searchRegex, replaceRegex) { // filter arguments

    return input.replace(RegExp(searchRegex), replaceRegex); // implementation

  };
});

Invocation dans un modèle pour censurer tous les chiffres:

<p>{{ myText | regexReplace: '[0-9]':'X' }}</p>
nh2
la source
4
Dans la liaison de modèle HTML {{filter_expression | filtre: expression: comparateur}}, En JavaScript $ filter ('filter') (expression_filtre, expression, comparateur)
Roman Sklyarov
@pulkitsinghal que voulez-vous dire? Affichez votre code problématique dans JSFiddle ou Plunker.
Roman Sklyarov
Cela aurait été bien si vous veniez de poster le filtre en Javascript
Obi
1
@ObiOnuorah OK, vient de traduire le Coffeescript en Javascript.
nh2
1
Bon produit. Pourquoi cette réponse n'est-elle pas en haut de la liste?
thethakuri
11

j'ai mentionné ci-dessous où j'ai également mentionné le filtre personnalisé, comment appeler ces filtres qui ont deux paramètres

countryApp.filter('reverse', function() {
    return function(input, uppercase) {
        var out = '';
        for (var i = 0; i < input.length; i++) {
            out = input.charAt(i) + out;
        }
        if (uppercase) {
            out = out.toUpperCase();
        }
        return out;
    }
});

et à partir du HTML en utilisant le modèle, nous pouvons appeler ce filtre comme ci-dessous

<h1>{{inputString| reverse:true }}</h1>

ici si vous voyez, le premier paramètre est inputString et le second paramètre est vrai qui est combiné avec "reverse" en utilisant le symbole:

Bravo
la source
4

Si vous voulez appeler votre filtre dans ng-options, le code sera le suivant:

ng-options="productSize as ( productSize | sizeWithPrice: product )  for productSize in productSizes track by productSize.id"

où le filtre est sizeWithPriceFilter et il a deux paramètres product et productSize

shacharsol
la source
1

comme ça:

var items = $filter('filter')(array, {Column1:false,Column2:'Pending'});
Amay Kulkarni
la source
0

Si vous avez besoin de deux ou plusieurs transactions avec le filtre, il est possible de les enchaîner:

{{ value | decimalRound: 2 | currencySimbol: 'U$' }} 
// 11.1111 becomes U$ 11.11
Jonatas Marinho
la source
doublon possible: stackoverflow.com/questions/16227325/…
sjokkogutten
1
Ne répond pas à la question "Comment appeler un filtre Angular.js avec plusieurs arguments?" (plutôt que "Comment appeler plusieurs filtres?")
rom99
-1

Dans ce code, jsondata est notre tableau et en retour de fonction nous vérifions la 'version' présente dans les jsondata.

var as = $filter('filter')(jsondata, function (n,jsondata){
   return n.filter.version==='V.0.3'
});

console.log("name is " + as[0].name+as[0]); 
Gajender Singh
la source