2.4 数据绑定实例：价格计算器_AngularJS入门与进阶-QQ阅读男生都市网

书名：AngularJS入门与进阶
作者名：江荣波
本章字数：332字
更新时间：2020-11-28 23:44:29

2.4 数据绑定实例：价格计算器

前面几节我们学习了AngularJS数据绑定的相关知识，本节我们使用这些知识来实现一个简单的价格计算器程序，完整代码如下：

代码清单：ch02\ch02_06.html

        <!doctype html>
        <html ng-app>
        <head>
            <meta charset="UTF-8">
            <title>ch02_06</title>
            <script type="text/javascript" src="../angular-1.5.5/angular.js">
            </script>
        </head>
        <body ng-init="price=10; num=1">
            <div>单价：<input type="number" ng-model="price" /></div><br/>
            <div>数量：<input type="number" ng-model="num" /></div><br/>
            <div>总价：{{price * num}}</div>
        </body>
        </html>

如上面的代码所示，首先使用ng-app指令启动AngularJS框架，接着使用ng-init指令在作用域对象中添加两个属性price和num，指定初始值为10和1，然后使用ng-model指令把price、num两个属性和表单元素进行数据绑定，最后我们使用表达式输出price和num的乘积。

在浏览器中运行ch02_06.html，可以看到“单价”输入框和“数量”输入框中的数据默认为10、1，说明作用域中的数据修改能够自动同步到视图中；修改单价输入框和数量输入框的内容分别为100、5，界面中输出总价为500（见图2.4），说明在视图中输入的数据也能够自动同步到作用域中，这便是AngularJS的双向数据绑定机制。

图2.4 价格计算器程序