Let's see with an example:
Step 1: This is going to be the structure.Include angular.js or angular.min.js file. The file circled are going to be used.
Step 2: In Stylesheet1.css
Step 3: In FilterandSorting.js
Step 5: Let's run the application
Sorting By Salary(Ascending)
Sorting By Salary(Descending)
Incrementing Sarah Salary by 1000
Decrementing Aaina Salary by 1000
Step 1: This is going to be the structure.Include angular.js or angular.min.js file. The file circled are going to be used.
table {
border-collapse: collapse;
font-family: Arial;
}
td {
border: 1px solid black;
padding: 5px;
}
th {
border: 1px solid black;
padding: 5px;
text-align: left;
cursor: pointer;
}
.reverseSort {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid black;
display: inline-block;
}
.Sort {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid black;
display: inline-block;
}
Step 3: In FilterandSorting.js
///
<reference path="angular.min.js" />
var myapp = angular
.module("AngularModule", [])
.controller("AngularController", function ($scope) {
var employees = [
{ firstName: "Sanjeet",
lastName: "Singh", Gender: "Male", DateOfBirth: "23/07/1991", Salary: 31000 },
{ firstName: "Sarah",
lastName: "Singhania", Gender: "Female", DateOfBirth: "11/04/1990", Salary: 35000 },
{ firstName: "Tanuj",
lastName: "Joshi", Gender: "Male", DateOfBirth: "06/12/1992", Salary: 22000 },
{ firstName: "Aaina",
lastName: "Tyagi", Gender: "Female", DateOfBirth: "07/07/1993", Salary: 26000 },
];
$scope.employees = employees;
$scope.numberofRows = 4;
$scope.sortColumn = "firstName";
$scope.reverseSort = false;
$scope.sortInfo = function (column) {
$scope.reverseSort =
($scope.sortColumn == column) ? !$scope.reverseSort : false;
$scope.sortColumn = column;
}
$scope.sortInfoClass = function (column) {
if ($scope.sortColumn == column) {
return $scope.reverseSort ? 'reverseSort' : 'Sort'
}
return '';
}
$scope.incrementSalary = function (employee) {
employee.Salary = employee.Salary +
1000;
}
$scope.decrementSalary = function (employee) {
employee.Salary = employee.Salary -
1000;
}
});
Step 4: In FilterandSort.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="AngularModule">
<head>
<title></title>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/FilterandSorting.js"></script>
<link href="StyleSheet1.css" rel="stylesheet" />
</head>
<body ng-controller="AngularController">
Number of Rows : <input type="number" min="0" max="50" step="1" ng-model="numberofRows" />
<br /><br />
<table>
<thead>
<tr>
<th ng-click="sortInfo('firstName')">First Name<div ng-class="sortInfoClass('firstName')"></div></th>
<th ng-click="sortInfo('lastName')">Last Name<div ng-class="sortInfoClass('lastName')"></div></th>
<th ng-click="sortInfo('Gender')">Gender<div ng-class="sortInfoClass('Gender')"></div></th>
<th ng-click="sortInfo('DateOfBirth')">Date Of Birth<div ng-class="sortInfoClass('DateOfBirth')"></div></th>
<th ng-click="sortInfo('Salary')">Salary<div ng-class="sortInfoClass('Salary')"></div></th>
<th>Increment Salary By 1000</th>
<th>Decrement Salary By 1000</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in
employees | limitTo:numberofRows |orderBy:sortColumn:reverseSort">
<td>{{employee.firstName}}</td>
<td>{{employee.lastName}}</td>
<td>{{employee.Gender}}</td>
<td>{{employee.DateOfBirth}}</td>
<td>{{employee.Salary}}</td>
<td><input type="button" value="Increment" ng-click="incrementSalary(employee)" /></td>
<td><input type="button" value="Decrement" ng-click="decrementSalary(employee)" /></td>
</tr>
</tbody>
</table>
</body>
</html>
Dynamically changing the Number of Rows
Sorting By Name (Descending Order)
Posts
0 comments:
Post a Comment