AngularJS-12 : Sort table
angular.min.js
-------------------------------------
Script.js
------------------------------------
/// <reference path="angular.min.js" />
var myAppModule = angular.module("myAppModule",[]).controller("myDataController",function ($scope) {
var employees =
[
{
firstName : "pavan",
lastName : "kumar",
gender : "Male",
city : "Bangalore"
},
{
firstName : "ram",
lastName : "kumar",
gender : "Male",
city : "Mysore"
}
]
$scope.employees = employees;
$scope.sortColumn = "firstName";
});
myHTML.html
---------------------------------------
<!DOCTYPE html>
<html ng-app="myAppModule">
<head>
<script type="text/javascript" src="resources/js/angular.min.js"></script>
<script type="text/javascript" src="resources/js/Script.js"></script>
</head>
<body ng-controller="myDataController">
Sort employee : <select ng-model="sortColumn">
<option value="firstName">First Name ASC</option>
<option value="lastName">First Name ASC</option>
<option value="gender">First Name ASC</option>
<option value="-city">First Name DESC</option>
</select>
<br/><br/>
<table>
<thead>
<tr>
<th>First Name </th>
<th>Last Name</th>
<th>Gender</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="emp in employees | orderBy:sortColumn">
<td>{{emp.firstName}}</td>
<td>{{emp.lastName}}</td>
<td>{{emp.gender}}</td>
<td>{{emp.city}}</td>
</tr>
</tbody>
</table>
</body>
</html>
angular.min.js
-------------------------------------
Script.js
------------------------------------
/// <reference path="angular.min.js" />
var myAppModule = angular.module("myAppModule",[]).controller("myDataController",function ($scope) {
var employees =
[
{
firstName : "pavan",
lastName : "kumar",
gender : "Male",
city : "Bangalore"
},
{
firstName : "ram",
lastName : "kumar",
gender : "Male",
city : "Mysore"
}
]
$scope.employees = employees;
$scope.sortColumn = "firstName";
});
myHTML.html
---------------------------------------
<!DOCTYPE html>
<html ng-app="myAppModule">
<head>
<script type="text/javascript" src="resources/js/angular.min.js"></script>
<script type="text/javascript" src="resources/js/Script.js"></script>
</head>
<body ng-controller="myDataController">
Sort employee : <select ng-model="sortColumn">
<option value="firstName">First Name ASC</option>
<option value="lastName">First Name ASC</option>
<option value="gender">First Name ASC</option>
<option value="-city">First Name DESC</option>
</select>
<br/><br/>
<table>
<thead>
<tr>
<th>First Name </th>
<th>Last Name</th>
<th>Gender</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="emp in employees | orderBy:sortColumn">
<td>{{emp.firstName}}</td>
<td>{{emp.lastName}}</td>
<td>{{emp.gender}}</td>
<td>{{emp.city}}</td>
</tr>
</tbody>
</table>
</body>
</html>
No comments:
Post a Comment