Filter Chaining when using paging #57

Closed
emanuel-london opened this Issue Aug 29, 2012 · 9 comments

Comments

Projects
None yet
3 participants
@emanuel-london

It seems that trying to implement filter chaining as described in the angular docs does not work when using the paging functionality. Is this feature supported?

per docs this should work:

{{ expression | filter1 | filter2 }}

but it doesn't.
Tried

paged:{pageSize: 15, filter: fitler1, filter: fitler2} but that just meant first filter didn't work. paged:{pageSize: 15, filter: fitler1 | fitler2} causes an error, as does: paged:{pageSize: 15, filter: fitler1, fitler2}
@tbosch

This comment has been minimized.

Show comment Hide comment
@tbosch

tbosch Sep 3, 2012

Contributor

Hi,
the paged filter needs to be the last filter, so e.g.

<div ng-repeat="row in list | filter1 | filter2 | paged>

Could you provided a jsfiddle?

Tobias

Contributor

tbosch commented Sep 3, 2012

Hi,
the paged filter needs to be the last filter, so e.g.

<div ng-repeat="row in list | filter1 | filter2 | paged>

Could you provided a jsfiddle?

Tobias

@tbosch

This comment has been minimized.

Show comment Hide comment
@tbosch

tbosch Sep 3, 2012

Contributor

Ah,
sorry, the paged filter does not work at all with other filters, as it stores the paging state in the list instance, and different filters will create new instances.

Tobias

Contributor

tbosch commented Sep 3, 2012

Ah,
sorry, the paged filter does not work at all with other filters, as it stores the paging state in the list instance, and different filters will create new instances.

Tobias

@tbosch

This comment has been minimized.

Show comment Hide comment
@tbosch

tbosch Sep 3, 2012

Contributor

What kind of filters are you using together with the paged filter?

Contributor

tbosch commented Sep 3, 2012

What kind of filters are you using together with the paged filter?

@emanuel-london

This comment has been minimized.

Show comment Hide comment
@emanuel-london

emanuel-london Sep 4, 2012

I am just filtering items by 2 arbitrary filleds from the content.

This is how it's supposed to work: http://docs.angularjs.org/guide/dev_guide.templates.filters.using_filters

This plugin seems to only allow three arguments to paged{}, namely: pageSize, filter, orderBy. The issue is that it only allows one filter, while angularjs lets you chain as many as you want, so once I started using this, my second filter was no longer working and I'm trying to figure out how to add support for a second (or third) filter.

I started looking at the code, but haven't made sense of it yet.

I am just filtering items by 2 arbitrary filleds from the content.

This is how it's supposed to work: http://docs.angularjs.org/guide/dev_guide.templates.filters.using_filters

This plugin seems to only allow three arguments to paged{}, namely: pageSize, filter, orderBy. The issue is that it only allows one filter, while angularjs lets you chain as many as you want, so once I started using this, my second filter was no longer working and I'm trying to figure out how to add support for a second (or third) filter.

I started looking at the code, but haven't made sense of it yet.

tbosch pushed a commit that referenced this issue Sep 4, 2012

@tbosch

This comment has been minimized.

Show comment Hide comment
@tbosch

tbosch Sep 4, 2012

Contributor

Hi,
with the last change the paged filter should work with filter chaining. Please note that the filter syntax is changed now:

<ul data-role="listview">
    <li ng-repeat="item in list | paged:'pager1'">{{item}}</li>
    <li ngm-if="pager1.hasMore()">
        <a href="#" ngm-click="pager1.loadMore()">Load more</a>
     </li>
</ul>

The main idea is that the paged filter gets a further parameter, the pager id. This is can then later be used for loadMore and hasMore. Another filter can now be added like documented by angular, e.g.

<ul data-role="listview">
    <li ng-repeat="item in list | filter:myFilter | paged:'pager1'">{{item}}</li>
    <li ngm-if="pager1.hasMore()">
        <a href="#" ngm-click="pager1.loadMore()">Load more</a>
     </li>
</ul>

For further details see the README.md. If you want to use it right now, use the 1.1.1-SNAPSHOT version. However, I will release 1.1.1 soon.

Thanks for reporting this, as it lead me to rethink the current implementation!

Tobias

Contributor

tbosch commented Sep 4, 2012

Hi,
with the last change the paged filter should work with filter chaining. Please note that the filter syntax is changed now:

<ul data-role="listview">
    <li ng-repeat="item in list | paged:'pager1'">{{item}}</li>
    <li ngm-if="pager1.hasMore()">
        <a href="#" ngm-click="pager1.loadMore()">Load more</a>
     </li>
</ul>

The main idea is that the paged filter gets a further parameter, the pager id. This is can then later be used for loadMore and hasMore. Another filter can now be added like documented by angular, e.g.

<ul data-role="listview">
    <li ng-repeat="item in list | filter:myFilter | paged:'pager1'">{{item}}</li>
    <li ngm-if="pager1.hasMore()">
        <a href="#" ngm-click="pager1.loadMore()">Load more</a>
     </li>
</ul>

For further details see the README.md. If you want to use it right now, use the 1.1.1-SNAPSHOT version. However, I will release 1.1.1 soon.

Thanks for reporting this, as it lead me to rethink the current implementation!

Tobias

@tbosch tbosch closed this Sep 4, 2012

@emanuel-london

This comment has been minimized.

Show comment Hide comment
@emanuel-london

emanuel-london Sep 4, 2012

Thanks for the fix!
There is one issue though, the "load more" link doesn't show up when the condition is met.

Here is a jsfiddle illustrating what I mean: http://jsfiddle.net/nLcC6/2/

Thanks for the fix!
There is one issue though, the "load more" link doesn't show up when the condition is met.

Here is a jsfiddle illustrating what I mean: http://jsfiddle.net/nLcC6/2/

@tbosch

This comment has been minimized.

Show comment Hide comment
@tbosch

tbosch Sep 5, 2012

Contributor

Hi,
there was an error in the fiddle: use pager1.hasMore instead of pager1.hasMore(), i.e. hasMore is a property, not a function. Here is an updated fiddle, that also uses data-role="page".
http://jsfiddle.net/nLcC6/3/

Tobias

Contributor

tbosch commented Sep 5, 2012

Hi,
there was an error in the fiddle: use pager1.hasMore instead of pager1.hasMore(), i.e. hasMore is a property, not a function. Here is an updated fiddle, that also uses data-role="page".
http://jsfiddle.net/nLcC6/3/

Tobias

@bjmac

This comment has been minimized.

Show comment Hide comment
@bjmac

bjmac May 1, 2013

Tobias,
I am working on this and am having an issue where the load more is not being applied. It is in a chain of filters and is last. I'm wondering if I have the correct version of angular.
Which version of angular should be used to solve this issue, I work with Emanuel and there is a version note in the angular lib stating 1.0.0rc12.
Brad

bjmac commented May 1, 2013

Tobias,
I am working on this and am having an issue where the load more is not being applied. It is in a chain of filters and is last. I'm wondering if I have the correct version of angular.
Which version of angular should be used to solve this issue, I work with Emanuel and there is a version note in the angular lib stating 1.0.0rc12.
Brad

@tbosch

This comment has been minimized.

Show comment Hide comment
@tbosch

tbosch May 1, 2013

Contributor

Hi Brad,
I updated the fiddle to the current versions: http://jsfiddle.net/nLcC6/8/. There, the paged filter is also last and is working as expected.
I changed the following: replaced ngm-click by ngm-vclick as stated in the Changelog.md when upgrading from jqm adapter 1.1.1 to 1.2.0.

The versions the adapter is running are noted in the Readme.md. Right now, the latest released version of the adapter is 1.3.0, which runs with jqm 1.3.0 and angular 1.0.5 (see here: https://github.com/tigbro/jquery-mobile-angular-adapter/blob/1.3.0/compiled/jquery-mobile-angular-adapter.js).

The version of the adapter always follows the version of jqm, e.g. adapter version 1.3.0 runs with jqm 1.3.0.

By the way, I will release 1.3.1 of the adapter, which works with jqm 1.3.1 in some weeks.

If you still have problems, it would be great if you could provide a jsfiddle using the sample from the Readme.md.

Hope this helps,
Tobias

Contributor

tbosch commented May 1, 2013

Hi Brad,
I updated the fiddle to the current versions: http://jsfiddle.net/nLcC6/8/. There, the paged filter is also last and is working as expected.
I changed the following: replaced ngm-click by ngm-vclick as stated in the Changelog.md when upgrading from jqm adapter 1.1.1 to 1.2.0.

The versions the adapter is running are noted in the Readme.md. Right now, the latest released version of the adapter is 1.3.0, which runs with jqm 1.3.0 and angular 1.0.5 (see here: https://github.com/tigbro/jquery-mobile-angular-adapter/blob/1.3.0/compiled/jquery-mobile-angular-adapter.js).

The version of the adapter always follows the version of jqm, e.g. adapter version 1.3.0 runs with jqm 1.3.0.

By the way, I will release 1.3.1 of the adapter, which works with jqm 1.3.1 in some weeks.

If you still have problems, it would be great if you could provide a jsfiddle using the sample from the Readme.md.

Hope this helps,
Tobias

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment