Increase and Decrease value using AngularJS
Introduction: Hello Guys, “Welcome back” Today i am here with another one new great article. In this article, I will explain that how you can increase and decrease value on the button click by using AngularJS.
Code for HTML Page
Implementation: On the HTML page I will place a DIV for applying ng-app and ng-controller AngularJS directives. On the HTML page I will also place two buttons for input one is for increment the values and other one is for decrement the values. Here I will assign AngularJS directive to the Buttons on clicks.
On the HTML page I will also place a SPAN for showing the output.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
// By default Count is zero.
$scope.Count = 0;
$scope.PlusCount = function () {
// This syntax will for Increment by 1.
$scope.Count++;
}
$scope.MinusCount = function () {
// This syntax will for Decrement by 1.
$scope.Count--;
}
});
</script>
On the HTML page I inherited AngularJS script file named angular.min.js Then, inside the Controller, the Count variable is set to Zero. When you will click the on the Button named Increment, the PlusCount function will be called. On click of the Increment Button, the Count variable is incremented by 1, and you can see the output on the page in the Span. When you will click the on the Button named Decrement, the MinusCount function will be called. On click of the Increment Button, the Count variable is decremented by 1, and you can see the output on the page in the Span.
<div ng-app="MyApp" ng-controller="MyController"> <input type="button" ng-click="PlusCount()" value="Click here for Increment Value " />
<input type="button" ng-click="MinusCount()" value=" Click here for Decrement Value" />
<hr />
ClickCount : <span style="font-weight:bold">{{Count}}</span>
</div>
Below I am giving the complete code for this function. You can copy and paste the whole code on your HTML page to enjoy the execution of this program.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body { font-family: Arial; font-size: 10pt; }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
// By default Count is zero.
$scope.Count = 0;
$scope.PlusCount = function () {
// This syntax will for Increment by 1.
$scope.Count++;
}
$scope.MinusCount = function () {
// This syntax will for Decrement by 1.
$scope.Count--;
}
});
</script>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyController">
<input type="button" ng-click="PlusCount()" value="Click Here for Increment" /> <Br /><Br /><Br />
<input type="button" ng-click="MinusCount()" value="Click Here for Decrement" /> <Br /><Br /><Br />
<Br />
Click Count : <span style="font-weight:bold">{{Count}}</span>
</div>
</body>
</html>
Conclusion: In above code, I have been explained that how you can increase and decrease value on the button click by using AngularJS. This code is very helpful for every developer. Bye Bye and take care of you Developers. We will come back shortly with the new article.
Thanks and Regards
Using ASP.Net
Comments
Post a Comment