AngularJS学习1

                           AngularJS学习

指令：ng-init

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <title> 测试页 </title>
 5     <meta charset="utf-8">
 6     <script src="http:/scripts/angular.min.js"></script>
 7 </head>
 8 <body>
 9 <div ng-app="" ng-init="quantity=12;price=5">
10    <p>总价： {{ quantity * price }}</p>
11 </div>
12 </body>
13 </html>
总价： 60

 

 

 

指令：ng-bind

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <title> 测试页 </title>
 5     <meta charset="utf-8">
 6     <script src="http:/scripts/angular.min.js"></script>
 7 </head>
 8 <body>
 9 <div ng-app="">
10    <p>请输入一个名字：<input type="text" ng-model="name"></p>
11    <p>Hello <span ng-bind="name"></span></p>
12 </div>
13 </body>
14 </html>

 

 

双括号与ng-bind的异同：
用双括号浏览器会首先解析之，然后AngularJS再会解析之，将之解析成你想看到的东西。相对而言，ng-bind会好点。

 

指令：ng-model

<!DOCTYPE HTML>
<html>
<head>
    <title> 测试页 </title>
    <meta charset="utf-8">
    <script src="http:/scripts/angular.min.js"></script>
</head>
<body>
<div ng-app="">
  <p>随便写写：<input type="text" ng-model="name"></p>
  <p>真的跟你一样么： {{ name }}</p>
</div>
</body>
</html>

 

 

指令：ng-click

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <title> 测试页 </title>
 5     <meta charset="utf-8">
 6     <script src="http:/scripts/angular.min.js"></script>
 7 </head>
 8 <body>
 9 <div ng-app="">
10     <button ng-click="click= !click">躲猫猫</button>
11   <div ng-hide="click">
12   KPW3 IS GOOD!
13   </div>
14 </div>
15 </body>
16 </html>

未点击时：

     

点击时:

 

 

posted @ 2015-08-23 22:35  公子若不胖天下谁胖  阅读(194)  评论(0)    收藏  举报