$filter() example using expression function

14,335 views
Skip to first unread message

ThomasBurleson

unread,
Jan 4, 2012, 4:20:34 PM1/4/12
to AngularJS
http://docs.angularjs.org/#!/api/angular.Array.filter documents
`expression` parameter as string|object|function()

1) What is the function definition expected:

function(element, index):Boolean, or
function(element):Boolean ?

2) How can I pass 1 or more model property values into the function()
so they can be used as filter criteria?

3) Does return TRUE mean filter/remove the element or show the
element?


These should be clearly documented with examples.

ThomasBurleson

unread,
Jan 4, 2012, 4:34:07 PM1/4/12
to AngularJS
After researching source code in src/service/filter/filter.js :

1) function definition expected is: function (element:*):Boolean
2) Seems like I need to curry the function
- how is this best done ?
- is this the expectation ?
- or is best practice simply to use reference to custom controller
filter methods that has access
to current model state ?
3) return FALSE to exclude element in filtered results.


So (a) docs can be improved and (b) still questions on (2)

On Jan 4, 3:20 pm, ThomasBurleson <thomasburle...@gmail.com> wrote:
> http://docs.angularjs.org/#!/api/angular.Array.filterdocuments

Dan Doyon

unread,
Jan 4, 2012, 7:49:54 PM1/4/12
to ang...@googlegroups.com
Thomas,

the element you are getting would be the current element of the repeater. I took the angularjs example (http://docs-next.angularjs.org/api/angular.Array.filterand changed it to use a filter. 


In this contrived example, I've created a FilterCtrl and am basically filtering based on value in searchText, if i don't test for undefined i get nothing. After this check i'm basically filtering only by the name element that starts with search text and is case insensitive. You can imagine that you could create a fairly complex filters. I think in most cases the regular filtering pattern would probably be sufficient. 

function FilterCtrl({
    var scope this;
    scope.doFilter function(elem
        if(!scope.searchTextreturn true;
        return angular.lowercase(elem.name).indexOfangular.lowercase(scope.searchText)== 0
    };        
} 

--dan


From: ThomasBurleson <thomasb...@gmail.com>
To: AngularJS <ang...@googlegroups.com>
Sent: Wednesday, January 4, 2012 1:34 PM
Subject: [angular.js] Re: $filter() example using expression function
--
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+unsub...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.



ThomasBurleson

unread,
Jan 4, 2012, 9:21:42 PM1/4/12
to AngularJS
Dan,

The key to your solution appears to be ng:model="searchText"; which
does not seem to be documented in the docs.angularjs.org.

I infer that it creates a controller [aka presentation model] property
called `searchText`; that controller property has an incoming binding
to the input DOM element value. Then you use closure to access that
property within the filter element.

Nice!

Would be great to see this approach (and ng:model) documented.

Thanks for your response.

On Jan 4, 6:49 pm, Dan Doyon <dando...@yahoo.com> wrote:
> Thomas,
>
> the element you are getting would be the current element of the repeater. I took the angularjs example (http://docs-next.angularjs.org/api/angular.Array.filter) and changed it to use a filter.
>
> http://jsfiddle.net/dandoyon/Zqb6t/
>
> In this contrived example, I've created a FilterCtrl and am basically filtering based on value in searchText, if i don't test for undefined i get nothing. After this check i'm basically filtering only by the name element that starts with search text and is case insensitive. You can imagine that you could create a fairly complex filters. I think in most cases the regular filtering pattern would probably be sufficient.
>
> function FilterCtrl() {
>     var scope = this;
>     scope.doFilter = function(elem) {
>         if(!scope.searchText) return true;
>         return angular.lowercase(elem.name).indexOf( angular.lowercase(scope.searchText)) == 0;
>     };
>
> }
>
> --dan
>
> ________________________________
>  From: ThomasBurleson <thomasburle...@gmail.com>
> To unsubscribe from this group, send email to angular+u...@googlegroups.com.

Dan Doyon

unread,
Jan 5, 2012, 12:39:20 AM1/5/12
to ang...@googlegroups.com
Thomas,

You would not see ng:model documented in 0.9.19 version (docs.angularjs.org) --- sorry my bad, I gave you an example current development version 0.10.5 (docs-next.angularjs.org)

here is the same fiddle using 0.9.19 version

http://jsfiddle.net/dandoyon/YzFkE/

I changed it a bit, but essentially same. In prior versions, angular bound to form elements based on 'name' attribute and not ng:model. I like that they made it more explicit in new version.

sorry for confusion

--dan

Reply all
Reply to author
Forward
0 new messages