上QQ阅读APP看书，第一时间看更新
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 价格计算器程序