Menu
I am trying to do some calculation but it is getting done as soon as I enter the amount. I just want this to happen on click of a button rather than automatically.
What I have done so far:
<!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> 
260
The AngularJS ng-click directive facilitates you to specify custom behavior when an element is clicked. So, it is responsible for the result what you get after clicking. It is supported by all HTML elements.
For a single btn, it's ok to use ng-click or onclick in the ng-app . There is no difference between the two functions. For effective team work, you,d better to have an account with each other. In Angular apps, ng-click is recommended.
Another significant difference between ng-click and onclick is the execution context. Code inside an onclick attribute executes against the global window object, while an expression inside of ng-click executes against a specific scope object, typically the scope object representing the model for the current controller.
The calculation occurs immediately since the calculation call is bound in the template, which displays its result when quantity changes.
Instead you could try the following approach. Change your markup to the following:
<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> Next, update your controller:
myAppModule.controller('myAppController', function($scope,calculateService) { $scope.quantity=1; $scope.quantityResult = 0; $scope.calculateQuantity = function() { $scope.quantityResult = calculateService.calculate($scope.quantity, 10); }; }); Here's a JSBin example that demonstrates the above approach.
The problem with this approach is the calculated result remains visible with the old value till the button is clicked. To address this, you could hide the result whenever the quantity changes.
This would involve updating the template to add an ng-change on the input, and an ng-if on the result:
<input type="text" ng-change="hideQuantityResult()" ng-model="quantity"/> and
<h2 ng-if="showQuantityResult">Total Cost: Rs.{{quantityResult}}</h2> In the controller add:
$scope.showQuantityResult = false; $scope.calculateQuantity = function() { $scope.quantityResult = calculateService.calculate($scope.quantity, 10); $scope.showQuantityResult = true; }; $scope.hideQuantityResult = function() { $scope.showQuantityResult = false; }; These updates can be seen in this JSBin demo.
91
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
