javascript

  • From what I understand you can’t pass an arguments to a filter function (when using the ‘filter’ filter).
  • Actually there is another (maybe better solution) where you can use the angular’s native ‘filter’ filter and still pass arguments to your custom filter.
  • As you can see weDontLike actually returns another function which has your parameter in its scope as well as the original item coming from the filter.
  • Storing the name in the scope won’t work so well as I have three lists from the same data on the same page im filtering with different states (or names).

Actually there is another (maybe better solution) where you can use the angular’s native ‘filter’ filter and still pass arguments to your custom filter.

@JavascriptQnA: Passing arguments to angularjs filters #javascript #angularjs #angular-filters

Actually there is another (maybe better solution) where you can use the angular’s native ‘filter’ filter and still pass arguments to your custom filter.

Consider the following code:

To make this work you just define your filter as the following:

As you can see here, weDontLike actually returns another function which has your parameter in its scope as well as the original item coming from the filter.

It took me 2 days to realise you can do this, haven’t seen this solution anywhere yet.

Checkout Reverse polarity of an angular.js filter to see how you can use this for other useful operations with filter.

This should actually be accepted, it’s a beter and working solution to the OP’s question. Nice one Denis! – ChrisR Nov 28 ’13 at 13:42

In case your filter needs multiple arguments, see How do I call an Angular.js filter with multiple arguments? – nh2 Feb 27 ’14 at 15:24

Agreed, this should be the chosen solution. very elegant! – JSancho Oct 17 ’14 at 12:20

This method also solved a weird issue where inside ng-repeat I couldnt pass my own parameters to my filter. No matter what I did they kept coming back as the index and the overall collection. By doing this return method I was able to pass my parameters and still load the original element, great fix! – Dennis Smolek Mar 30 ’15 at 5:51

Love this solution – Tyguy7 Jul 6 ’15 at 17:31

From what I understand you can’t pass an arguments to a filter function (when using the ‘filter’ filter). What you would have to do is to write a custom filter, sth like this:

The other simple alternative, without writing custom filters is to store a name to filter out in a scope and then write:

Thats prefect thanks! Storing the name in the scope won’t work so well as I have three lists from the same data on the same page im filtering with different states (or names). – shapeshifter Aug 1 ’12 at 7:03

any to set ‘Adam’ (referring to your JSFiddle) dynamically? it seems impossible (and I guess that’s on purpose) to combine ngModel and a custom filter in Angular… – Rolf Apr 20 ’13 at 21:34

Is it possible to reorder the parameters of a filter? For example pass the item to the second parameter of a filter? – Пуя Dec 24 ’14 at 13:11

It is worth noting that in this example the markup is {{ items | weDontLike:’thenameyoudontlike’ }} … right now you have to go to the fiddle to get that. Also worth noting that you can pass multiple params to your custom filter {{ items | weDontLike:’thename’:[‘I am’, ‘an array’]:’and so on’ }} you would just add more arguments to your custom filter to have access to them. – Benjamin Conant Nov 26 ’15 at 19:56

Yes. Side note – if somebody’s name is ‘!Adam’, you get him like {name:’!!Adam’}. – honzajde Mar 10 ’13 at 0:21

– iConnor Aug 11 ’13 at 23:12

jsfiddle link is broken. – Seregwethrin Jan 27 ’14 at 13:35

!Adam is the worst name ever – Ben Wheeler Aug 11 ’14 at 18:29

Not-Not-Adam is obviously worse. – twip Oct 10 ’14 at 21:00

Simple and easy! – Gregory Bolkenstijn Nov 17 ’15 at 10:49

I like this approach better than the other techniques. – Greg Jan 17 ’16 at 17:07

This is the correct solution. – Cam Jul 12 ’16 at 21:12

Here’s the jsfiddle link.

javascript

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.