單擊按鈕時的Angularjs動作

我正在嘗試做一些計算，但只要輸入金額就會完成。我只是希望這發生在點擊按鈕而不是自動。單擊按鈕時的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>

來源

2014-02-11 Abhishek Kumar

發生計算立即由於計算調用模板，顯示它的結果時quantity變化約束。

相反，您可以嘗試以下方法。您的標記更改爲以下：

<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', function($scope,calculateService) { 
    $scope.quantity=1; 
    $scope.quantityResult = 0; 

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

這裏有一個JSBin example演示上面的方法。

這種方法的問題是計算結果保持舊值可見直到按鈕被點擊。要解決這個問題，只要quantity更改，您可以隱藏結果。

這將涉及更新所述模板上的輸入添加ng-change，和該結果的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。

來源

2014-02-11 05:21:58

Tnkyou somuch快速回復。多一點小小的幫助。如果我想執行相同的任務，以表格格式根據在一個文本框中輸入的值計算不同費率的值，比如說，像這樣的一些東西http://www.investing.com/forex-tools/fibonacci - 計算器 –

@AbhishekKumar沒問題。我建議你創建一個新的問題，並準確解釋你需要什麼，因爲這是一個非常不同的要求。發佈一個新問題，並顯示預期輸入和輸出的示例，以及您嘗試的任何代碼，然後有人會幫助您。 –

單擊按鈕時的Angularjs動作

回答

相關問題