How to group data with Angular filter ?
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.
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:
.png)
