dynamic filter property

[For Sale Sticker]

I am interested in using a filter that can change the property it searched on based on a drop down.

For example I want to do something like:

<div ng-repeat="c in allCategories | filter:{keywords:keyword}">{{c}}</div> 

but where it says filter:{keywords:keyword] I want to make the property (keywords0 dynamic - so it gets it from a dropdown

[Jim Hoskins]

So I took a stab at it. 

One solution, using $scope.$watch : http://jsfiddle.net/Kpjzj/

Since the key in an object literal has to be a string or identifier, not a variable, you have to assign it with obj[variableKey] = syntax, which is problematic to do in an angular expression. I fell back to having a model for the key and a model for the value and a model for the filter object, and each time the key or value model changes, update the filter model. This pattern should provide a bit of flexibility in the behavior of your filter.

Alternatively you could write your own filter, that takes an array [key1, value1, key2, value2, ...], which effectively translates to the filter directive using the object {key1: value1, key2: value2} where the keys are the values of variables with the name keyN. An example: http://jsfiddle.net/qNfPH/2/

So there are two possible solutions. Both of these assume that unless both the key and value to search on are truthy, you don't want to filter, but you could change that easily enough.

[Dave Merrill]

If I understand what you're trying to do, step 3 of the official tutorial shows a simple dynamic filter. Step 4 adds dynamic sorting.

Dave Merrill

[Dave Merrill]

Sorry, sent w/o the URL: http://docs.angularjs.org/tutorial/step_04

[Jim Hoskins]

The issue here is that not only is the content of the search dynamic, but the key that is being searched on is also dynamic.

So there is a dropdown with all the fields (name, email, phone), and a text field for the search query. By changing the dropdown, it would result in different filters

{ name: "query"}

{ email: "query"}

or

{ phone: "query}

Since object literal syntax doesn't allow variables in the key position, it requires a workaround to change what the key is in the object.

...if I understood the question correctly, of course.

On Thursday, November 29, 2012 9:09:59 AM UTC-5, Dave Merrill wrote:

[For Sale Sticker]

That worked perfectly.  

I knew that there would be a way to do it - but had no idea how.

Thanks

[Dave Merrill]

That's what I get for driveby careless reading, apologies..,

[Jim Hoskins]

Awesome!

[For Sale Sticker]

the fiddle you set up using $watch works great

http://jsfiddle.net/Kpjzj/

but I just noticed that I get a JS error in the console:

Error: 10 $digest() iterations reached. Aborting!

any ideas on what to do for that?

On Tuesday, November 27, 2012 11:14:18 PM UTC-7, Jim Hoskins wrote:

[Peter Bacon Darwin]

By default $watch uses object identity for comparison.  In your function you are returning a new array each time, which obviously is not the same object as last time so the $digest is unstable.

You need to tell $watch to use field by field equality by adding a true parameter to the end of the $watch call.

http://jsfiddle.net/kCgX8/

Pete

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
 
 

[For Sale Sticker]

Perfect.  That did it.