-
Notifications
You must be signed in to change notification settings - Fork 45
/
Copy pathAngularLimitTo.html
131 lines (129 loc) · 4.88 KB
/
AngularLimitTo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
<script src="../scripts/angular.js"></script>
<script>
var app = angular.module("DemoApp",[]);
app.controller("HomeController", function($scope){
$scope.products =[
{
Id:1,
Name:"Samsung TV",
Price:45000.54,
Mfd:new Date("2019/03/22")
},
{
Id:2,
Name:"Nike Shoe",
Price:5000.54,
Mfd:new Date("2019/02/10")
},
{
Id:3,
Name:"Mobile",
Price:15000.54,
Mfd:new Date("2019/05/12")
},
{
Id:4,
Name:"Lee Cooper Shoe",
Price:4000.54,
Mfd:new Date("2019/02/11")
},
{
Id:5,
Name:"Lee Cooper Shoe",
Price:4000.54,
Mfd:new Date("2019/02/11")
},
{
Id:6,
Name:"Lee Cooper Shoe",
Price:4000.54,
Mfd:new Date("2019/02/11")
},
{
Id:7,
Name:"Lee Cooper Shoe",
Price:4000.54,
Mfd:new Date("2019/02/11")
},
{
Id:8,
Name:"Lee Cooper Shoe",
Price:4000.54,
Mfd:new Date("2019/02/11")
},
{
Id:9,
Name:"Lee Cooper Shoe",
Price:4000.54,
Mfd:new Date("2019/02/11")
},
{
Id:10,
Name:"Lee Cooper Shoe",
Price:4000.54,
Mfd:new Date("2019/02/11")
},
{
Id:11,
Name:"Lee Cooper Shoe",
Price:4000.54,
Mfd:new Date("2019/02/11")
},
{
Id:12,
Name:"Lee Cooper Shoe",
Price:4000.54,
Mfd:new Date("2019/02/11")
},
];
$scope.fieldName= "Id";
$scope.reverse=false;
$scope.Sort = function(fieldName){
$scope.fieldName = fieldName;
$scope.reverse = ($scope.fieldName===fieldName)?!$scope.reverse:$scope.reverse==false;
}
$scope.recordsPerPage=4;
$scope.startWith=0;
$scope.Next = function(){
$scope.startWith+=$scope.recordsPerPage;
}
$scope.Previous = function(){
$scope.startWith-=$scope.recordsPerPage;
}
})
</script>
</head>
<body ng-app="DemoApp" ng-controller="HomeController">
<div class="container">
<h2>Products List</h2>
<table class="table table-hover">
<thead>
<th><a ng-click="Sort('Id')" class="btn btn-block btn-primary" href="">Product Id</a></th>
<th><a ng-click="Sort('Name')" class="btn btn-block btn-primary" href="">Name</a></th>
<th><a ng-click="Sort('Price')" class="btn btn-block btn-primary" href="">Price</a></th>
<th><a ng-click="Sort('Mfd')" class="btn btn-block btn-primary" href="">Manufactured</a></th>
</thead>
<tbody>
<tr ng-repeat="item in products|orderBy:fieldName:reverse|limitTo:recordsPerPage:startWith">
<td>{{item.Id}}</td>
<td>{{item.Name |uppercase}}</td>
<td>{{item.Price|currency:'₹'}}</td>
<td>{{item.Mfd |date:'dd MMMM , yyyy'}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4" align="center">
<button ng-click="Previous()" class="btn btn-outline-success"> < </button>
<button ng-click="Next()" class="btn btn-outline-success"> > </button>
</td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>