Skip to content

Commit 6ae4bb1

Browse files
codeaholicguycodeaholicguy
committed
Add validation and filter tutorial
1 parent edde766 commit 6ae4bb1

File tree

6 files changed

+219
-0
lines changed

6 files changed

+219
-0
lines changed

‎angular-validation-filter/.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
.idea
2+
angular-builtin-directive-p3.iml

‎angular-validation-filter/angular-forms-models.iml

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<module type="WEB_MODULE" version="4">
3+
<component name="NewModuleRootManager" inherit-compiler-output="true">
4+
<exclude-output />
5+
<content url="file://$MODULE_DIR$" />
6+
<orderEntry type="inheritedJdk" />
7+
<orderEntry type="sourceFolder" forTests="false" />
8+
</component>
9+
</module>

‎angular-validation-filter/app.js

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
/**
2+
* Created by hoangnn on 29/10/2015.
3+
*/
4+
(function () {
5+
6+
var app = angular.module('Store', []);
7+
8+
app.controller('StoreController', function () {
9+
this.products = products;
10+
});
11+
12+
app.controller('PanelController', function () {
13+
this.tab = 'description';
14+
15+
this.setTab = function (tab) {
16+
this.tab = tab;
17+
};
18+
19+
this.isSelected = function (tab) {
20+
return this.tab === tab;
21+
}
22+
});
23+
24+
app.controller("ReviewController", function () {
25+
this.review = {};
26+
27+
this.addReview = function (product) {
28+
product.reviews.push(this.review);
29+
};
30+
});
31+
32+
var products = [
33+
{
34+
name: 'Apple iPad Air 2 Wifi/4G 16G',
35+
price: 499,
36+
description: 'Một bước ngoặt trong thiết kế của Apple vừa tinh tế, vừa sang trọng và thời thượng và những cải tiến đáng giá. Apple iPad Air 2 ra mắt là chiếc máy tính bảng 9.7 inch mỏng và nhẹ nhất hiện nay',
37+
inStock: true,
38+
images: [
39+
{
40+
full: "images/ipad.png",
41+
thumb: "images/ipad.png"
42+
},
43+
{
44+
full: "images/ipad.png",
45+
thumb: "images/ipad.png"
46+
}
47+
],
48+
reviews: [
49+
{
50+
stars: 5,
51+
body: "I love this product!",
52+
author: "hoangn@codeaholicguy.com"
53+
},
54+
{
55+
stars: 1,
56+
body: "This product sucks",
57+
author: "bob@hater.com"
58+
}
59+
]
60+
},
61+
{
62+
name: 'Apple iPad Air 2 Wifi/4G 64G',
63+
price: 599,
64+
description: 'Một bước ngoặt trong thiết kế của Apple vừa tinh tế, vừa sang trọng và thời thượng và những cải tiến đáng giá. Apple iPad Air 2 ra mắt là chiếc máy tính bảng 9.7 inch mỏng và nhẹ nhất hiện nay',
65+
inStock: true,
66+
images: [
67+
{
68+
full: "images/ipad.png",
69+
thumb: "images/ipad.png"
70+
},
71+
{
72+
full: "images/ipad.png",
73+
thumb: "images/ipad.png"
74+
}
75+
]
76+
},
77+
{
78+
name: 'Apple iPad Air 2 Wifi/4G 128G',
79+
price: 699,
80+
description: 'Một bước ngoặt trong thiết kế của Apple vừa tinh tế, vừa sang trọng và thời thượng và những cải tiến đáng giá. Apple iPad Air 2 ra mắt là chiếc máy tính bảng 9.7 inch mỏng và nhẹ nhất hiện nay',
81+
inStock: true,
82+
images: [
83+
{
84+
full: "images/ipad.png",
85+
thumb: "images/ipad.png"
86+
},
87+
{
88+
full: "images/ipad.png",
89+
thumb: "images/ipad.png"
90+
}
91+
]
92+
}
93+
]
94+
95+
})();

‎angular-validation-filter/images/ipad.png

30.5 KB
Loading

‎angular-validation-filter/images/iphone.png

36.8 KB
Loading

‎angular-validation-filter/index.html

+113
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<!DOCTYPE html>
2+
<html ng-app="Store">
3+
<head lang="en">
4+
<meta charset="UTF-8">
5+
<title>angular-controller-example</title>
6+
7+
<!-- Vendor -->
8+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
9+
integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ=="
10+
crossorigin="anonymous">
11+
</head>
12+
<body>
13+
14+
<div class="container">
15+
<div class="page-header">
16+
<h1>Store</h1>
17+
</div>
18+
<div class="panel panel-default" ng-controller="StoreController as store">
19+
<div class="panel-body" ng-repeat="product in store.products">
20+
<h1>{{product.name}}</h1>
21+
22+
<div class="thumbnail">
23+
<img ng-src="{{product.images[0].thumb}}">
24+
</div>
25+
26+
<h2>$ {{product.price}}</h2>
27+
28+
<button class="btn btn-primary" ng-show="product.inStock">Thêm vào giỏ</button>
29+
30+
<hr>
31+
<section ng-controller="PanelController as panel">
32+
<ul class="nav nav-pills">
33+
<li ng-class="{active:panel.isSelected('description')}">
34+
<a ng-click="panel.setTab('description')" href>Giới thiệu</a>
35+
</li>
36+
<li ng-class="{active:panel.isSelected('specification')}">
37+
<a ng-click="panel.setTab('specification')" href>Cấu hình</a>
38+
</li>
39+
<li ng-class="{active:panel.isSelected('review')}">
40+
<a ng-click="panel.setTab('review')" href>Đánh giá</a>
41+
</li>
42+
</ul>
43+
<div class="panel" ng-show="panel.isSelected('description')">
44+
<h4>Giới thiệu</h4>
45+
46+
<p>{{product.description}}</p>
47+
</div>
48+
<div class="panel" ng-show="panel.isSelected('specification')">
49+
<h4>Cấu hình</h4>
50+
51+
<p>None yet</p>
52+
</div>
53+
<div class="panel" ng-show="panel.isSelected('review')">
54+
<h4>Đánh giá</h4>
55+
56+
<blockquote ng-repeat="review in product.reviews">
57+
<b>{{review.stars}} star(s)</b>
58+
{{review.body}}
59+
<cite>- {{review.author}}</cite>
60+
</blockquote>
61+
62+
<form class="form-horizontal" name="reviewForm"
63+
ng-controller="ReviewController as reviewCtrl"
64+
ng-submit="reviewCtrl.addReview(product)">
65+
<blockquote>
66+
<b>{{reviewCtrl.review.stars}} star(s)</b>
67+
{{reviewCtrl.review.body}}
68+
<cite>- {{reviewCtrl.review.author}}</cite>
69+
</blockquote>
70+
71+
<div class="form-group">
72+
<label class="col-sm-1 control-label">Email</label>
73+
<div class="col-sm-6">
74+
<input ng-model="reviewCtrl.review.author" type="email" class="form-control" placeholder="Email">
75+
</div>
76+
</div>
77+
<div class="form-group">
78+
<label class="col-sm-1 control-label">Review</label>
79+
<div class="col-sm-6">
80+
<textarea ng-model="reviewCtrl.review.body" class="form-control" rows="3"></textarea>
81+
</div>
82+
</div>
83+
<div class="form-group">
84+
<label class="col-sm-1 control-label">Star</label>
85+
<div class="col-sm-6">
86+
<select ng-model="reviewCtrl.review.stars" class="form-control">
87+
<option value="1">1 star</option>
88+
<option value="2">2 stars</option>
89+
<option value="3">3 stars</option>
90+
<option value="4">4 stars</option>
91+
<option value="5">5 stars</option>
92+
</select>
93+
</div>
94+
</div>
95+
<div class="form-group">
96+
<div class="col-sm-offset-1 col-sm-10">
97+
<button type="submit" class="btn btn-default">Gửi</button>
98+
</div>
99+
</div>
100+
</form>
101+
</div>
102+
</section>
103+
</div>
104+
</div>
105+
</div>
106+
107+
<!-- Vendor -->
108+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
109+
110+
<!-- Application -->
111+
<script src="app.js"></script>
112+
</body>
113+
</html>

0 commit comments

Comments
 (0)