-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
115 lines (106 loc) · 5.84 KB
/
index.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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Chinu AngularJS - Search Multiple - Sort column - Filter Example</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/sandstone/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<style>
body { padding-top:50px; }
</style>
</head>
<!-- Controller name goes here -->
<body ng-app="chinuApp">
<div class="container" ng-controller="mainController as main">
<div class="alert alert-info col-lg-12">
<div class="col-lg-6">Sort Type: {{ sortType }}</div>
<div class="col-lg-6">Sort Reverse: {{ sortReverse }}</div>
<div class="col-lg-12">Search Query: {{ search | json}}</div>
</div>
<form>
<div class="form-group row col-lg-12">
<div class="col-lg-3">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-search"></i></div>
<input type="text" class="form-control" placeholder="Search Name" ng-model="search.name">
</div>
</div>
<div class="col-lg-3">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-search"></i></div>
<input type="text" class="form-control" placeholder="Search Email" ng-model="search.email">
</div>
</div>
<div class="col-lg-3">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-search"></i></div>
<input type="text" class="form-control" placeholder="Search Address" ng-model="search.address">
</div>
</div>
<div class="col-lg-2">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-search"></i></div>
<select name="age" ng-model="search.age" class="form-control">
<option value="">Select Age</option>
<option ng-repeat="age in [] | range:100" value="{{age}}">{{age}}</option>
</select>
</div>
</div>
<div class="col-lg-1">
<div class="input-group">
<button type="button" class="btn btn-primary" ng-click="clearFilter()">Reset</button>
</div>
</div>
</div>
</form>
<table class="table table-bordered table-striped">
<thead>
<tr>
<td>
<a href="#" ng-click="sortType = 'name'; sortReverse = !sortReverse">Name
<span ng-show="sortType == 'name' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'name' && sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
<td>
<a href="#" ng-click="sortType = 'email'; sortReverse = !sortReverse">Email
<span ng-show="sortType == 'email' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'email' && sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
<td>
<a href="#" ng-click="sortType = 'address'; sortReverse = !sortReverse">Address
<span ng-show="sortType == 'address' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'address' && sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
<td>
<a href="#" ng-click="sortType = 'age'; sortReverse = !sortReverse">Age
<span ng-show="sortType == 'age' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'age' && sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="profile in filteredData = (chinu | orderBy:sortType:sortReverse | filter:{name:search.name} | filter:{email:search.email} | filter:{address:search.address} | filter:{age:search.age})">
<td>{{ profile.name }}</td>
<td>{{ profile.email }}</td>
<td>{{ profile.address }}</td>
<td>{{ profile.age }}</td>
</tr>
<tr ng-if="filteredData.length==0">
<td colspan="4">No record found</td>
</tr>
</tbody>
</table>
<p class="text-center">
<a href="https://github.com/chinmay235/Search-Multiple-fields-and-Sorting-AngularJS">Back to tutorial</a>
</p>
<p class="text-center">
by <a href="http://www.fb.com/chinmay235" target="_blank">Chinmay</a>
</p>
</div>
<script src="js/angular.min.js"></script>
<script src="js/controller.js"></script>
</body>
</html>