How to group data with Angular filter ? Last Updated : 29 Jul, 2020 Summarize Comments Improve Suggest changes Share Like Article Like 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: Clone & build https://github.com/a8m/angular-filter git repositoryVia Bower: by running $ bower install angular-filter from your terminalVia 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= "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> Output: Comment More infoAdvertise with us Next Article AngularJS | date Filter A abhishekkharmale Follow Improve Article Tags : AngularJS CSS-Misc HTML-Misc AngularJS-Misc Similar Reads How to Sort List by Date Filter in AngularJS ? AngularJS is a feature-based JavaScript framework that uses various tools to create dynamic single-page web applications. While developing the application we have the requirement to play with the data in AngularJS and sort this list of data by a date properly in descending order. This can be done us 5 min read How to apply filters to *ngFor in Angular ? In this article, we will see How to apply filters to *ngFor in AngularJS, along with understanding their basic implementation through the examples. NgFor is used as a Structural Directive that renders each element for the given collection each element can be displayed on the page. Implementing the f 3 min read How to use filter within controllers in AngularJS ? In this article, we will see how to use the Filter inside the controller using AngularJS. Filters are used to format the value of an expression and display it to the user. It can be used in HTML Previews, Controllers or Services, and directives. AngularJS facilitates many built-in filters, although, 4 min read AngularJS | date Filter AngularJS date filter is used to convert a date into a specified format. When the date format is not specified, the default date format is 'MMM d, yyyy'. Syntax: {{ date | date : format : timezone }} Parameter Values: The date filter contains format and timezone parameters which is optional.Some com 2 min read How to Loop through Object with *ngFor in Angular ? JSON stands for JavaScript Object Notation. It is a format for structuring data. This format is used by different web applications to communicate with each other. In this article, we will learn Loop through Object with *ngFor in Angular. Table of Content Steps for Installing & Configuring the An 3 min read How to filter by object property in AngularJS? Filtering by object property in AngularJS is the concept of choosing the specific objects from the data array which is based on the individual properties. In creating a web application, this is the most common task that deals with the data that needs to be sorted and then displayed to the user. Deve 6 min read Like