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.
- 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" > w3wiki </ p > < p class = "w3-large w3-text-green pad" align = "center" > A computer science portal for Beginner </ 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: