In this article I will explain with an example, how to increase and decrease value on button click in
AngularJS.
HTML Markup
The following HTML Markup consists of:
DIV – For applying
ng-app and
ng-controller AngularJS directives.
Note: If you want to learn more about these directives, please refer my article Introduction to AngularJS.
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.
Note: For more details on ng-click directive, please refer my article ng-click example in AngularJS.
SPAN – For displaying message.
<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 () {
// 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 />
ClickCount : <span style="font-weight:bold">{{Count}}</span>
</div>
Screenshot
Demo
Downloads
