Angular filter magic (tutorial 3)

[superabe]

Tutorial 3 on filtering repeaters really looks like magic of the good kind  :) I can't believe it's this easy to setup client side filtering!

So I get that if I want the text in the input file to filter on just the phone.name property I could do this:

Fulltext Search: <input ng-model="query.name"> 

and then later on:

 <li ng-repeat="phone in phones | filter:query"> 

How would I go about changing this so that the filter looks at matches in both phone.name and phone.snippet? (assume phone has more than 2 properties on it)

Thx,

- superabe

[Andy Joslin]

Do you mean something like this?

http://plunker.no.de/edit/OsrKLN?live=preview 

[superabe superabe]

No not like that. My case would be more like 1 single search input field, and I want the search text in there to filter through multiple specified properties of an object.

E.g. I would like to specify filter act on properties x and y, so that if I search for "Bar", the filter result would contain both objects below.

{x: "Foo Bar", y: "Foo Baz", z: "Something Else"}

{x: "Foo Baz", y: "Baz  Bar", z: "Something Else"} 

On Sun, Apr 29, 2012 at 9:31 PM, Andy Joslin <andyt...@gmail.com> wrote:

Do you mean something like this?

http://plunker.no.de/edit/OsrKLN?live=preview 

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.

To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/QWGwq3w6GFUJ.

To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

[Pawel Kozlowski]

Hi!

On Mon, Apr 30, 2012 at 5:24 AM, superabe superabe <supe...@gmail.com> wrote:

> E.g. I would like to specify filter act on properties x and y, so that if I
> search for "Bar", the filter result would contain both objects below.
>
> {x: "Foo Bar", y: "Foo Baz", z: "Something Else"}
> {x: "Foo Baz", y: "Baz  Bar", z: "Something Else"}

If you specify a string as a filer property it will act on all object
properties, see the jsFiddle: http://jsfiddle.net/tCL9z/2/

If, on the other hand, you would like to limit filtering to certain
properties only you could specify a filtering function:
http://jsfiddle.net/pkozlowski_opensource/tCL9z/15/ (just an example,
should be robust in reality).

This doc article explain all the options you've got:
http://docs-next.angularjs.org/api/angular.module.ng.$filter.filter

Hope this helps,
Pawel

[superabe superabe]

Excellent!. Thanks..the filterFunction is precisely what I need.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.

[excelm...@googlemail.com]

Why not embrace the power of Angular :)

<li ng-repeat="phone in phones | filter:{name:query,snippet:query}">

To be honest, I just found that out after I was trying to create the above mentioned filter function ;)

Am Montag, 30. April 2012 15:31:45 UTC+2 schrieb superabe:

Excellent!. Thanks..the filterFunction is precisely what I need.

On Mon, Apr 30, 2012 at 4:13 AM, Pawel Kozlowski <pkozlowski.opensource@gmail.com> wrote:

Hi!

On Mon, Apr 30, 2012 at 5:24 AM, superabe superabe <supe...@gmail.com> wrote:

> E.g. I would like to specify filter act on properties x and y, so that if I
> search for "Bar", the filter result would contain both objects below.
>
> {x: "Foo Bar", y: "Foo Baz", z: "Something Else"}
> {x: "Foo Baz", y: "Baz  Bar", z: "Something Else"}

If you specify a string as a filer property it will act on all object
properties, see the jsFiddle: http://jsfiddle.net/tCL9z/2/

If, on the other hand, you would like to limit filtering to certain
properties only you could specify a filtering function:
http://jsfiddle.net/pkozlowski_opensource/tCL9z/15/ (just an example,
should be robust in reality).

This doc article explain all the options you've got:
http://docs-next.angularjs.org/api/angular.module.ng.$filter.filter

Hope this helps,
Pawel

--
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+unsubscribe@googlegroups.com.

[duk...@gmail.com]

It's called the "stumbled upon" method of feature discovery!

[tomblo...@gmail.com]

On Thursday, 19 July 2012 21:59:48 UTC+1, excelm...@googlemail.com wrote:

Why not embrace the power of Angular :)

<li ng-repeat="phone in phones | filter:{name:query,snippet:query}">

To be honest, I just found that out after I was trying to create the above mentioned filter function ;)

The problem is, that filters on objects that match both name AND snippet, instead of name OR snippet.
 

[andyt...@gmail.com]

Tomblo, you can just create a function to filter for you then.

JS:

$scope.filterPhonesByNameOrSnippet = function(phones,query) {

  var filteredPhones = [];

  var queryRegExp = RegExp(query, 'i'); //'i' -> case insensitive

  angular.forEach(phones, function(phone) {

    if (phone.name.match(queryRegExp) || phone.snippet.match(queryRegExp)) {

      filteredPhones.push(phone);

    }

  });

  return filteredPhones;

};

HTML:
<li ng-repeat="phone in filterPhonesByNameOrSnippet(phones, query)">