AngularJsLearningExamples/hello.html at master · monicaxun/AngularJsLearningExamples · GitHub

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
<!DOCTYPE html>
<html lang='en' ng-app>
	<head>
		<meta charset="utf-8">
		<!-- <script type="text/javascript" src="http://code.angularjs.org/angular-1.0.1.min.js"></script> -->
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

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

		<style type="text/css">
			form ul li{
				padding:20px 30px;
				background-color:#e35885;
				margin-bottom:8px;
				box-shadow:0 1px 1px rgba(0,0,0,0.1);
				cursor:pointer;
			}

			form ul li span{
				float:right;
			}

			form ul li.active{
				background-color:#8ec16d;
			}
		</style>
	</head>
	<body>
		<div>
			<input type="text" ng-model="your_name" />
			<label>Hello {{ your_name || "World!" }}</label>
		</div>
		<!-- 测试ng-hide与ng-show对于变量的反应 -->
		<div>

			Click me: <input type="checkbox" ng-model="checked"><br/>
			<div>
			  Show:
			  <div class="check-element animate-hide" ng-show="checked">
			    I show up when your checkbox is checked.
			  </div>
			</div>
			<div>
			  Hide:
			  <div class="check-element animate-hide" ng-hide="checked">
			    I hide when your checkbox is checked.
			  </div>
			</div>

		</div>

		<!-- 编写Inline Editor -->
		<div ng-controller="InlineEditorController">
			<div ng-click="hideTooltips()">
				<div class="tooltip" ng-click="$event.stopPropagation()" ng-show="showTooltips">
					<input type="text" ng-model="value" />
				</div>

				<p ng-click="toogleTooltips($event)">{{value}}</p>
			</div>
		</div>

		<!-- 订单表单 -->
		<!-- 货币过滤器 -->
		<!-- ng-repeat绑定(文档)是框架的另一个有用的特性，能够让你遍历数组元素并且生成相应的标记。当某个条目改变或者删除时，它能够智能地更新。 -->
		<div ng-controller="OrderFormController">
			<form>
				<ul>
					<li ng-repeat="service in services" ng-click="activeStatusExchange(service)" ng-class="{active:service.active}">
						{{service.name}} <span>{{service.price | currency}}</span>
					</li>
				</ul>

				<div class="total">
					Total: <span>{{total() | currency}}</span>
				</div>
			</form>
		</div>

	</body>
</html>