Discuss: idiomatic way of displaying size of a filtered collection

[PK1A]

Consider a typical example of an expression where we want to have a data table that is filtered, paginated and sorted:

{foreach itemIdx, item in ctrl.tableItems | filter:ctrl.search | sorter.sort | limit:limitBoundaries.from:limitBoundaries.count}
            <tr>
                <td>{item.CustomerName}</td>
               ...
            </tr>
{/foreach}

Now, we would like to display the number of filtered elements. In the TODO MVC example we can see one approach:

hashspace/docs/todomvc/todoctrl.js

Line 47 in a223a0b

syncData : function () {

. While it works it is rather cumbersome to write. Ideally I would like to be able have this logic in the template only. 2 proposals:

• {(ctrl.tableItems | filter:ctrl.search).length}
• {foreach itemIdx, item in (filtered = ctrl.tableItems | filter:ctrl.search) | sorter.sort | limit:limitBoundaries.from:limitBoundaries.count} and then {filtered.length}

[PK1A]

I've tried {let filteredCollection = (ctrl.tableItems | filter:ctrl.search)} but this doesn't seem to do the trick either.

[benouat]

I also encountered this issue, and I have to admit that even the work around are not that easy to implement...

We have to provide something.

[b-laporte]

I am surprised the {let} option doesn't work - this is a bug

[b-laporte]

I just tried the following in the "list ordering" sample of the playground and it works:

    <div class="msg">
            {let nameSorter=new Sorter({property:"name",states:"ADN"})}
            <span class="info">
                List sorted with a Sorter object (current state: {nameSorter.state})
            </span>
            <ol>
                {let list=persons|nameSorter}
                {foreach p in list}
                    <li>{p.name}</li>
                {/foreach}
                Number of items:{list.length}
            </ol>
            <a onclick="{nameSorter.nextState()}">Change sort order</a>
        </div>

So are you sure the {let} version didn't work?

[PK1A]

Hmm, it might have to do with the place where I've put {let} - just before its usage and after {foreach}. I will re-test it as soon as I can get the application back to the usable state :-)

In any case what I love to be able to avoid the let statement - supporting {(ctrl.tableItems | filter:ctrl.search).length} would be ideal.

[PK1A]

@b-laporte ok, here is what happens with {let}:

• dropping () makes the expression compile: {let filteredCollection = ctrl.tableItems | filter:ctrl.search}. With parenthesis ({let filteredCollection = (ctrl.tableItems | filter:ctrl.search)}) I was getting the "Invalid expression" error.
• After it compiles the display works OK the first time but the expression doesn't get evaluated when the filtering expression (ctrl.search) changes