Multiple Filtered Counts with Angular

Question

I have a list of users for each of my stores [model.stores.users] in JSON object and currently show the number of users against each store by accessing store.users.length

Now I want two extra counts, these counts are just based on the number of users with a simple boolean filter.

• Count of Active Users is where user.is_user_active = true
• Count of Pending Users is where user.is_user_active = false

<div class="table-responsive">
    <table class="table table-hover">
        <thead>
            <tr>
                <th class="hidden">ID</th>
                <th>Name</th>
                <th>Users</th>
            </tr>
        </thead>
        <tbody class="tbl-jobs-data" ng-repeat="item in model.stores">
            <tr data-toggle="collapse" class="accordion-toggle" data-target="#store_user{{$index}}">
                <td class="hidden">{{item.id}}</td>
                <td class="">{{item.name}}</td>
                <td class="user-count">{{item.users.length}}</td>
            </tr>
            <tr ng-if="item.users.length > 0">
                <td colspan="100" class="hiddenRow">
                    <div class="accordian-body collapse" id="store_user{{$index}}">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>State</th>
                                    <th>Is Active</th>
                                    <th>Last Login</th>
                                </tr>
                            </thead>
                            <tbody class="tbl-search-data">
                                <tr ng-repeat="app in item.users">
                                    <td>{{app.id}}</td>
                                    <td>{{app.name}}</td>
                                    <td>{{app.state}}</td>
                                    <td>{{app.is_user_active}}</td>
                                    <td>{{app.last_login}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Answer 1

Just use filter, eg

<td class="active_user_count">
    {{ (item.users | filter : { is_user_active: true }).length }}
</td>
<td class="pending_user_count">
    {{ (item.users | filter : { is_user_active: false }).length }}
</td>

_{I hope I've got the syntax right, the Angular docs are down at the moment >:(}