Angularjs动作点击按钮

我试图做一些计算，但一旦输入金额，它就会完成。我只是希望这是发生在点击一个按钮，而不是自动。

我到目前为止做了什么

<!DOCTYPE html>
<html ng-app="myAppModule">
  <head>
    <title>Angular JS - programming-free.com</title>
    <link href="https://dl.dropBox.com/u/96099766/DetailModalExample/bootstrap.css"  rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="lib/angularjs.min.js"></script>
  </head>
  <body>
    <div ng-controller="myAppController" style="text-align:center">
      <p style="font-size:28px;">
        Enter Quantity:
        <input type="text" ng-model="quantity"/>
      </p>
      <h2>Total Cost: Rs.{{calculateval(quantity,10)}}</h2>
    </div>
    <script type="text/javascript">
      var myAppModule = angular.module('myAppModule',[]);
      myAppModule.controller('myAppController',function($scope,calculateService) {
        $scope.quantity=1;
        $scope.calculateval = function(xval,yval) {                       
          return calculateService.calculate(xval,yval);
        }
      });
      // Service 
      myAppModule.factory('calculateService',function(){
        return {
          calculate: function(xval,yval){
            return xval*yval;
          }  
        }               
      });
    </script>
  </body>
</html>

由于计算调用被绑定在模板中，因此在数量更改时显示其结果，因此立即进行计算。

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

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

接下来，更新您的控制器：

myAppModule.controller('myAppController',calculateService) {
  $scope.quantity=1;
  $scope.quantityResult = 0;

  $scope.calculateQuantity = function() {
    $scope.quantityResult = calculateService.calculate($scope.quantity,10);
  };
});

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

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

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

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

和

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

在控制器中添加：

$scope.showQuantityResult = false;

$scope.calculateQuantity = function() {
  $scope.quantityResult = calculateService.calculate($scope.quantity,10);
  $scope.showQuantityResult = true;
};

$scope.hideQuantityResult = function() {
  $scope.showQuantityResult = false;
};

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

原文链接：https://www.f2er.com/angularjs/144451.html

Angularjs动作点击按钮

猜你在找的Angularjs相关文章