-
Notifications
You must be signed in to change notification settings - Fork 45
/
Copy pathAngularFilter.html
84 lines (84 loc) · 3.13 KB
/
AngularFilter.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
<!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"),
Photo:"../Images/tv.jpg"
},
{
Id:2,
Name:"Nike Shoe",
Price:5000.54,
Mfd:new Date("2019/02/10"),
Photo:"../Images/shoe.jpg"
},
{
Id:3,
Name:"Mobile",
Price:15000.54,
Mfd:new Date("2019/05/12"),
Photo:"../Images/mobile.jpg"
},
{
Id:4,
Name:"Lee Cooper Shoe",
Price:4000.54,
Mfd:new Date("2019/02/11"),
Photo:"../Images/shoe1.jpg"
},
];
})
</script>
</head>
<body ng-app="DemoApp" ng-controller="HomeController">
<div class="container">
<table cellspacing="15" cellpadding="15">
<tr>
<td>
<h2>Filter Products</h2>
<dl>
<dt>Name</dt>
<dd><input type="text" ng-model="search.Name"></dd>
<dt>Price</dt>
<dd><input type="text" ng-model="search.Price"></dd>
<dt>Select Product</dt>
<dd>
<select ng-model="search.Name">
<option>Shoe</option>
<option>TV</option>
</select>
</dd>
</dl>
</td>
<td>
<div class="card-deck">
<div class="card" ng-repeat="item in products|filter:search">
<div class="card-header">
{{item.Name}}
</div>
<div class="card-body">
<img src="{{item.Photo}}" class="img-thumbnail" width="100" height="100">
</div>
<div class="card-footer">
<h4>{{item.Price | currency}}
<br>
{{item.Mfd | date}}
</h4>
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>