July 16, 2018

Angular Dynamic Counter Update value

By admin AngularJs, Technology 0 Comments

Angular Dynamic Counter Update value

Today, We want to share with you Angular Dynamic Counter Update value.
In this post we will show you Dynamic Counter Update value using AngularJS | AngularJS Counter Directive, hear for Simple AngularJs Countdown Timer we will give you demo and example for implement.
In this post, we will learn about AngularJS Counter Directive with an example.

This time we have simple created an Angularjs define module and new controller create, in which we set the simple default value of(0) $scope.counter to 0 and here in this example, we have also defined a one method called Like as a function name is decrement. As this is already simple plain JavaScript function, here we can simple already use the new autoincrement and autodecrement value expression like this one: here varible define counter–.

READ : Angular Call Function on Page Load Example

In the HTML set Value to we set angularjs directiv ng-click=”decrement()” which means the auto decrement method will be called every time a like as a button is pressed.

Example 1

Example 2

In-memory Simple counter(Increment and Decrement) with controller using Angularjs

<!doctype html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
 <body>
    <script>
    angular.module("liveTotalCntApp", [])
        .controller("TotalCntController", function($scope) {
            $scope.TotalCnt = 0;
            $scope.decrement = function() {
                $scope.TotalCnt--;
            };
    })
    </script>
    <div ng-app="liveTotalCntApp">
        <div ng-controller="TotalCntController">
            <button ng-click="TotalCnt = TotalCnt + 1">Increment Value</button>
            <button ng-click="decrement()">Decrement</button>
			<br/>
            <h2 align="center"><mark>{{TotalCnt}}</mark></h2>
        </div>
    </div>
 </body>
</html>

AngularJS simple controller tutorial to increment a value

<!DOCTYPE html>
<html>
<head>
<title>AngularJS simple controller tutorial to increment a value</title>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="infinityknowApp" ng-controller='MyCtrl'>
  <p>val={{val}}</p>
  <button ng-click="inc();">click to Data increment</button>
</div>
<script>
var module = angular.module('infinityknowApp', []);
module.controller('MyCtrl', function($scope) {
  $scope.val = 1;
  $scope.inc = function() {
    $scope.val += 1;
  };
});
</script>
</body>
</html>

How can I increment and decrement a value in angularjs?

<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app>
<div>
    <button ng-click="datacount = datacount+1" ng-init="datacount=15">
        Increment Value
    </button>
    count: {{datacount}}

    <button ng-click="datacount = datacount - 1">
        Decrement Value
    </button>
<div>
</div>

</body>
</html>

Example

READ : Angular Adding Table New Rows Dynamically

Example 3

Post Views: 773