In this angularjs program we will go through parsing JSON data into html table and sort it by column header as well as sort it in ascending and descending order.
<html ng-app="myApp"> <!-- Tell broswer that you are going to use angular js -->
<head>
<meta charset="utf-8">
<1-- include angular.min.js library from googleapis.com -->
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
/* Create module */
myApp = angular.module('myApp',[]);
/* define controller with name myController */
myApp.controller('myController',function($scope) {
/* Declaring set of array element within scope variable myData */
$scope.myData = [
{"Name":"Sayani","Age":27},
{"Name":"Somoshree","Age":6},
{"Name":"Somarothi","Age":28},
{"Name":"Allen","Age":32},
{"Name":"Peter","Age":22},
{"Name":"Daniel","Age":34},
{"Name":"Samantha","Age":44}
];
});
</script>
</head>
<!- setting body as scope of myController -->
<body ng-controller="myController">
<!-- Adding Combolist with two columns Name and Age of table in which data will be parsed.
setting ng-model as sortBy-->
Sort By : <select ng-model="sortBy">
<option value="Name">Name</option>
<option value="Age">Age</option>
</select>
<!-- Adding to options Ascending and Descending to change the sort order, setting ng-model as
sortOrder -->
<br>Sort In : Ascending : <input type="radio" name="sortOrder" ng-model="sortOrder" checked />
Descending :<input type="radio" name="sortOrder" ng-model="sortOrder" value=reverse />
<table border=1>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<!-- setting ng-repeat into "tr " that will parse array data into "td" orderBy is set to sortBy of list object and sortOrder of radio button-->
<tr ng-repeat="data in myData | orderBy : sortBy : sortOrder">
<td>{{data.Name}}</td>
<td>{{data.Age}}</td>
</tr>
</table>
</body>
</html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
myApp = angular.module('myApp',[]);
myApp.controller('myController',function($scope) {
$scope.myData = [
{"Name":"Sayani","Age":27},
{"Name":"Somoshree","Age":6},
{"Name":"Somarothi","Age":28},
{"Name":"Allen","Age":32},
{"Name":"Peter","Age":22},
{"Name":"Daniel","Age":34},
{"Name":"Samantha","Age":44}
];
});
</script>
</head>
<body ng-controller="myController">
Sort By : <select ng-model="sortBy">
<option value="Name">Name</option>
<option value="Age">Age</option>
</select>
<br>Sort In : Ascending : <input type="radio" name="sortOrder" ng-model="sortOrder" checked />
Descending :<input type="radio" name="sortOrder" ng-model="sortOrder" value=reverse />
<table border=1>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr ng-repeat="data in myData | orderBy : sortBy : sortOrder">
<td>{{data.Name}}</td>
<td>{{data.Age}}</td>
</tr>
</table>
</body>
</html>Sort By :
Sort In : Ascending : Descending :
| Name | Age |
|---|---|
| {{data.Name}} | {{data.Age}} |
No comments:
Post a Comment