angularJS案例：双向数据绑定

angularJS 案例： 双向数据绑定 （1）

 1 <!doctype html> 
 2 <!-- 双向数据绑定 -->
 3 <html ng-app> 
 4 <!-- <html>元素的ng-app属性。少了这个属性，AngularJS就没法开始工作。 -->
 5   <head> 
 6     <script src="angular.min.js"></script> 
 7     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
 8   </head> 
 9   <body> 
10     <div> 
11       <input type="text" ng-model="yourName" placeholder="Enter a name here"> 
12       <!-- 告诉AngularJS，对页面上的“yourName” 这个Model进行双向数据绑定。 -->
13       <h1>Hello, {{ yourName }}!</h1> 
14       <!-- 告诉AngularJS，在“{{ yourName }}”这个指令模版上显示“yourName”这个Model的数据。 -->
15     </div> 
16   </body> 
17 </html>

运行结果：

 

 

angularJS 案例： 双向数据绑定 （2）

 1 <!DOCTYPE html>
 2 <html ng-app>
 3 <!-- 定义了 ng-app 应用程序，angularjs的作用范围是整个html -->
 4     <head>
 5         <script src="angular.min.js"></script>
 6         <!-- 加载了angularjs的js文件 -->
 7     </head>
 8     <body>
 9         <div ng-controller="testCtrl">
10         <!-- 定义了一个控制器 ，该控制器的采用构造函数的方法，在脚本中初始化两个变量 -->
11             <b>Invoice:</b>
12             <br>
13             <br>
14             <table>
15             <!--  table中，采用 ng-model ，绑定数据元素number1,number2 -->
16                 <tr><td>num1</td><td>num2</td></tr>
17                 <tr>
18                     <td><input type="number" min="0" max="10" ng-model="number1" required ></td>
19                     <td><input type="number" min="2" max="10" ng-model="number2" required ></td>
20                 </tr>
21             </table>
22             <hr>
23             <b>Total:</b> {{number1 * number2 | currency}}
24             <!-- 通过 {{表达式}} 产生结果，完全是动态的根据ng-model所绑定的值，自动改变 -->
25             <!-- 通过currency 过滤器 ，展现成为货币格式 -->
26         </div>
27         <script>
28             function testCtrl($scope) {
29                 $scope.number1 = 2;
30                 $scope.number2 = 5.6;
31             }
32         </script>
33     </body>
34 </html>

代码分析：

　　1 在<head>中我们首先 加载了angularjs的js文件。

　　2 在html标签中，定义了 ng-app 应用程序，意思是angularjs的作用范围是真个html。类似地，如果在div中定义ng-app，那么就只能在这个div中使用angularjs了。

　　3 在div中定义了一个 控制器 ，该控制器的采用构造函数的方法，在脚本中初始化两个变量。

　　4 table中，采用 ng-model ，绑定数据元素number1,number2。

　　5 在div的结束部分，通过 {{表达式}} 产生结果，这里并没有任何的方法调用，完全是动态的根据ng-model所绑定的值，自动改变。

　　6 通过currency 过滤器 ，展现成为货币格式。

运行结果：

posted @ 2015-08-17 15:30  anna·tang  阅读(556)  评论(0)    收藏  举报