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 =
</ 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: