How to group data with Angular filter ?

Last Updated : 29 Jul, 2020

The task is to show how to group-data with an Angular-filter.

Steps involved:

1. You can install angular-filter using these four different methods:

Clone & build https://github.com/a8m/angular-filter git repository

Via Bower: by running $ bower install angular-filter from your terminal

Via npm: by running $ npm install angular-filter from your terminal.

Via cdnjs: add the following script-src to your application.

2. Include angular-filter.js (or angular-filter.min.js) in your index.html, after including Angular itself as shown in the below example.

3. Add 'angular.filter' to your main module's list of dependencies.

Example: In this example, we will group dogs by their breeds using angular-filter.

HTML

<!DOCTYPE html>
<html>

<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js">
    </script>
    
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.7/angular-filter.js">
    </script>
    
    <link rel="stylesheet" href=
        "https://www.w3schools.com/w3css/4/w3.css">
    <meta charset="utf-8">
</head>

<body ng-app="myApp" ng-controller="myCtrl">

    <p class="w3-jumbo w3-text-green pad" 
        align="center" style="margin: 0 0 0 0">
        GeeksforGeeks
    </p>

    <p class="w3-large w3-text-green pad" 
        align="center">
        A computer science portal for geeks
    </p>

    <ul>
        <li ng-repeat=
            "(key, value) in dogs | groupBy:'breed'">
            Breed: {{ key }}
            <ol>
                <li ng-repeat="dog in value">
                    Dog name: {{ dog.name }}
                </li>
            </ol>
        </li>
    </ul>


    <script type="text/javascript">
        //(3)
        angular.module('myApp', ['angular.filter'])
            .controller('myCtrl', function ($scope) {
            $scope.dogs = [
                { name: 'Alex', breed: 'German Shepherd' },
                { name: 'Rocky', breed: 'Bulldog' },
                { name: 'John', breed: 'Beagle' },
                { name: 'Paula', breed: 'Bulldog' },
                { name: 'Bobby', breed: 'German Shepherd' }
            ];
        });
    </script>
</body>

</html>