Open In App

How to group data with Angular filter ?

Improve
Improve
Like Article
Like
Save
Share
Report

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:

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

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

Installing via npm 

  • 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=
    </script>
      
    <script src=
    </script>
      
    <link rel="stylesheet" href=
    <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>


Output: 



Last Updated : 29 Jul, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads