In this article I will explain with an example, how to increment and decrement variable in
AngularJS.
HTML Markup
The following HTML Markup consists of:
DIV – For applying
ng-app and
ng-controller AngularJS directives.
Buttons – For capturing user input.
The HTML INPUT Buttons have been assigned with the following
AngularJS directive.
ng-click – Called when user clicks the Button.
SPAN – For displaying message.
<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 () {
// Increment the Count by one.
$scope.Count++;
}
$scope.MinusCount = function () {
// Decrement the Count by one.
$scope.Count--;
}
});
</script>
Incrementing and Decrementing value on Button click in AngularJS
Inside the HTML Markup, the following
AngularJS script file is inherited:
1. angular.min.js
Then, inside the Controller, the Count variable is set to Zero.
Increment
When Increment Button is clicked, the PlusCount function is called.
Inside this function, the Count variable is incremented by 1, which will be later displayed on the page using SPAN element.
Decrement
When Decrement Button is clicked, the MinusCount function is called.
Inside this function, the Count variable is decremented by 1, which will be later displayed on the page using SPAN element.
<div ng-app="MyApp" ng-controller="MyController">
<input type="button" ng-click="PlusCount()" value="Increment" />
<input type="button" ng-click="MinusCount()" value="Decrement" />
<hr />
Click Count : <span style="font-weight:bold">{{Count}}</span>
</div>
Screenshot
Demo
Downloads
