Angularjs动作点击按钮

前端之家收集整理的这篇文章主要介绍了Angularjs动作点击按钮前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图做一些计算,但一旦输入金额,它就会完成。我只是希望这是发生在点击一个按钮,而不是自动

我到目前为止做了什么

  1. <!DOCTYPE html>
  2. <html ng-app="myAppModule">
  3. <head>
  4. <title>Angular JS - programming-free.com</title>
  5. <link href="https://dl.dropBox.com/u/96099766/DetailModalExample/bootstrap.css" rel="stylesheet" type="text/css" />
  6. <script type="text/javascript" src="lib/angularjs.min.js"></script>
  7. </head>
  8. <body>
  9. <div ng-controller="myAppController" style="text-align:center">
  10. <p style="font-size:28px;">
  11. Enter Quantity:
  12. <input type="text" ng-model="quantity"/>
  13. </p>
  14. <h2>Total Cost: Rs.{{calculateval(quantity,10)}}</h2>
  15. </div>
  16. <script type="text/javascript">
  17. var myAppModule = angular.module('myAppModule',[]);
  18. myAppModule.controller('myAppController',function($scope,calculateService) {
  19. $scope.quantity=1;
  20. $scope.calculateval = function(xval,yval) {
  21. return calculateService.calculate(xval,yval);
  22. }
  23. });
  24. // Service
  25. myAppModule.factory('calculateService',function(){
  26. return {
  27. calculate: function(xval,yval){
  28. return xval*yval;
  29. }
  30. }
  31. });
  32. </script>
  33. </body>
  34. </html>
由于计算调用被绑定在模板中,因此在数量更改时显示其结果,因此立即进行计算。

相反,您可以尝试以下方法。将您的标记更改为以下内容

  1. <div ng-controller="myAppController" style="text-align:center">
  2. <p style="font-size:28px;">Enter Quantity:
  3. <input type="text" ng-model="quantity"/>
  4. </p>
  5. <button ng-click="calculateQuantity()">Calculate</button>
  6. <h2>Total Cost: Rs.{{quantityResult}}</h2>
  7. </div>

接下来,更新您的控制器:

  1. myAppModule.controller('myAppController',calculateService) {
  2. $scope.quantity=1;
  3. $scope.quantityResult = 0;
  4.  
  5. $scope.calculateQuantity = function() {
  6. $scope.quantityResult = calculateService.calculate($scope.quantity,10);
  7. };
  8. });

这是一个JSBin example,演示了上述方法

这种方法的问题是计算结果保持可见与旧的值,直到按钮被点击。为了解决这个问题,您可以在数量变化时隐藏结果。

这将包括更新模板以在输入上添加更改,并在结果上添加ng-if:

  1. <input type="text" ng-change="hideQuantityResult()" ng-model="quantity"/>

  1. <h2 ng-if="showQuantityResult">Total Cost: Rs.{{quantityResult}}</h2>

在控制器中添加

  1. $scope.showQuantityResult = false;
  2.  
  3. $scope.calculateQuantity = function() {
  4. $scope.quantityResult = calculateService.calculate($scope.quantity,10);
  5. $scope.showQuantityResult = true;
  6. };
  7.  
  8. $scope.hideQuantityResult = function() {
  9. $scope.showQuantityResult = false;
  10. };

这些更新可以在JSBin demo中看到。

猜你在找的Angularjs相关文章