Angular JS Group by Count With Filter

Question

<script>
    var myApp = angular.module('myApp', ['angular.filter']);

    myApp.controller("MyController", function ($scope) 
    {
        $scope.movies = 
        [
            { title: 'The Matrix', rating: 7.5, category: 'Action' },
            { title: 'Focus', rating: 6.9, category: 'Comedy' },
            { title: 'The Lazarus Effect', rating: 6.4, category: 'Thriller' },
            { title: 'Everly', rating: 5.0, category: 'Action' },
            { title: 'Maps to the Stars', rating: 7.5, category: 'Drama' }
        ];
    });     

</script>
<div ng-controller="MyController"> 
    <div class="searchBar">
        <input type="text" name="title" ng-model="title" placeholder="Search..." />
    </div>
    <ul class="angularList" ng-repeat="(key, value) in movies  | groupBy: 'category'">
        <h3>{{ key }} ({{ value.length }})</h3>
        <li ng-repeat="movie in value | filter:title">
            <a href="#">{{ movie.title }}</a><br />
            <div class="rating_box">
                <div class="rating" style="width:{{movie.rating*10}}%"></div>
            </div>
        </li>               
    </ul>
</div>

I want result :

Action (2)

The Matrix

Everly

Like this The code will be perfect, only count is not perfect with group and filter. can any guys help. So main problem is placing the filter over category.

Thanks, Ajai Pandey

Michel · Accepted Answer · 2015-10-26 10:12:20Z

3

You need to store the result of the filtered list in an alias:

 <h3>{{ key }} ({{ filteredList.length }})</h3>
 <li ng-repeat="movie in value | filter:title as filteredList">

The nice part is that you can use this variable above the ng-repeat where you are filtering, as long as it is in the scope of your controller.

See fiddle

answered Oct 26, 2015 at 10:12

Michel

28.6k6 gold badges67 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sevle · Accepted Answer · 2016-03-03 12:33:16Z

0

try this below code:

<tr ng-repeat="(key, value) in data">
    <td> {{key}} </td> <td> {{ value }} </td>
</tr>

check this link for the documentation on ng-repeat.

edited Mar 3, 2016 at 12:33

Sevle

3,1192 gold badges22 silver badges32 bronze badges

answered Oct 26, 2015 at 10:31

Ashokreddy

3521 silver badge11 bronze badges

Collectives™ on Stack Overflow

Angular JS Group by Count With Filter

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related