一直想学习angularJS, 但是不知道angularJS用在页面的好处是什么, 今天我有一个粗陋的理解,记录下来。
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script> <div ng-controller="myCalc"> 单价: <span ng-model="number1">5</span> <br/> 数量: <input type="number" min="2" max="10" ng-model="number2" required ></td> <hr> <b>Total:</b> {{number1 * number2 | currency}} </div>
这样子写出来一个简单的计算器。 至于用处, 我只想到了我们前端在写购物车的时候,需要计算数量和单价的总价, 然后各个单价需要计算总和, 用这个还是特别方便的。
<script> function myCalc($scope) { $scope.number1 = 5; $scope.number2 = 5.60; } </script>
添加上面这个代码, number1表示单价, number2表示数量, 在total 里面实时得到了总价。 千万不要忘记在html处加上<html ng-app>
整体代码为
<!DOCTYPE html> <html ng-app> <head> <meta charset="utf-8" /> <title></title> <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script> </head> <body> 来一个计算器: <div ng-controller="myCalc"> 单价: <span ng-model="number1">5</span> <br/> 数量: <input type="number" min="2" max="10" ng-model="number2" required ></td> <hr> <b>Total:</b> {{number1 * number2 | currency}} </div> <script> function myCalc($scope) { $scope.number1 = 5; $scope.number2 = 5.60; } </script> </body> </html>