Ng-Repeat-5

 

In this example we have a students array with the roll number, name, class and section of the student. By using ng-repeat directive we print the Name of the student and class of the student and orderBy the ng-repeat by class. See the output the student of the 3rd class shows on the first position of the list then student of 4th class and so on. If you want to see the output in descending order then simply prefix minus sign to the 'cls' ( orderBy: '-cls' ) like this.

 
 
 
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Welcome to LearnKode - A code learning platform</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> </head> <body ng-app="app"> <div ng-controller="controllerName"> <div ng-repeat="model in students | orderBy: 'cls'"> {{model.name}} ------ {{model.cls}} </div> </div> <script> var app = angular.module("app", []); app.controller('controllerName', ['$scope', function ($scope) { $scope.students = [{ rollno: '1', name: 'John', cls: '7th', section: 'A' }, { rollno: '2', name: 'David', cls: '5th', section: 'A' }, { rollno: '3', name: 'John', cls: '3th', section: 'C' }, { rollno: '4', name: 'Willam', cls: '5th', section: 'A' }, { rollno: '5', name: 'Smith', cls: '4th', section: 'D' }, { rollno: '6', name: 'Allen', cls: '6th', section: 'C' }]; }]); </script> </body> </html>
Output