Filter Chaining when using paging

[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]

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]

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]

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]

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]

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

[tbosch]

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

[emanuel-london]

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.

[emanuel-london]

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]

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]

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

[emanuel-london]

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/

[emanuel-london]

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]

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

[tbosch]

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]

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]

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]

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

[tbosch]

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