angular-tutorial/angular-forms-models/index.html at master · codeaholicguy/angular-tutorial · GitHub

113 lines (100 loc) · 4.83 KB

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

<!DOCTYPE html>

<html ng-app="Store">

<head lang="en">

<meta charset="UTF-8">

<title>angular-controller-example</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"

integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ=="

crossorigin="anonymous">

</head>

<body>

<div class="container">

<div class="page-header">

<h1>Store</h1>

</div>

<div class="panel panel-default" ng-controller="StoreController as store">

<div class="panel-body" ng-repeat="product in store.products">

<h1>{{product.name}}</h1>

<div class="thumbnail">

<img ng-src="{{product.images[0].thumb}}">

</div>

<h2>$ {{product.price}}</h2>

<button class="btn btn-primary" ng-show="product.inStock">Thêm vào giỏ</button>

<hr>

<section ng-controller="PanelController as panel">

<ul class="nav nav-pills">

<li ng-class="{active:panel.isSelected('description')}">

<a ng-click="panel.setTab('description')" href>Giới thiệu</a>

</li>

<li ng-class="{active:panel.isSelected('specification')}">

<a ng-click="panel.setTab('specification')" href>Cấu hình</a>

</li>

<li ng-class="{active:panel.isSelected('review')}">

<a ng-click="panel.setTab('review')" href>Đánh giá</a>

</li>

</ul>

<div class="panel" ng-show="panel.isSelected('description')">

<h4>Giới thiệu</h4>

<p>{{product.description}}</p>

</div>

<div class="panel" ng-show="panel.isSelected('specification')">

<h4>Cấu hình</h4>

<p>None yet</p>

</div>

<div class="panel" ng-show="panel.isSelected('review')">

<h4>Đánh giá</h4>

<blockquote ng-repeat="review in product.reviews">

<b>{{review.stars}} star(s)</b>

{{review.body}}

<cite>- {{review.author}}</cite>

</blockquote>

<form class="form-horizontal" name="reviewForm"

ng-controller="ReviewController as reviewCtrl"

ng-submit="reviewCtrl.addReview(product)">

<blockquote>

<b>{{reviewCtrl.review.stars}} star(s)</b>

{{reviewCtrl.review.body}}

<cite>- {{reviewCtrl.review.author}}</cite>

</blockquote>

<div class="form-group">

<label class="col-sm-1 control-label">Email</label>

<div class="col-sm-6">

<input ng-model="reviewCtrl.review.author" type="email" class="form-control" placeholder="Email">

</div>

</div>

<div class="form-group">

<label class="col-sm-1 control-label">Review</label>

<div class="col-sm-6">

<textarea ng-model="reviewCtrl.review.body" class="form-control" rows="3"></textarea>

</div>

</div>

<div class="form-group">

<label class="col-sm-1 control-label">Star</label>

<div class="col-sm-6">

<select ng-model="reviewCtrl.review.stars" class="form-control">

<option value="1">1 star</option>

<option value="2">2 stars</option>

<option value="3">3 stars</option>

<option value="4">4 stars</option>

<option value="5">5 stars</option>

</select>

</div>

</div>

<div class="form-group">

<div class="col-sm-offset-1 col-sm-10">

<button type="submit" class="btn btn-default">Gửi</button>

</div>

</div>

</form>

</div>

</section>

</div>

</div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>

<script src="app.js"></script>

</body>

</html>