CODEWITHSUNDEEP
javascriptangularjs
madhu kumar
madhu kumar

Reputation: 810

How can I increment and decrement a value in angularjs?

I have one value initially - let's call it x. Selecting the increment button should increase "+1" to the value. If I select decrement, x should decrease by -1.

However, what actually happens is that when I press the increment button, it increases +1 but if i click decrement, it decreases -2. It should only be increased/decreased by 1 value only. Also don't require continuous iteration (count++ and count--). it would be better if "count" is taken as variable inside .js file, not mentioning it in html as ng-init="count=15" .

JsBin

<div ng-controller="CounterController">
  <button ng-click="count = {{count}}+1" ng-init="count=15">
    Increment
  </button>
  count: {{count}}

  <button ng-click="count = {{(count) - 1}}">
    Decrement
  </button>
<div>

Upvotes: 9

Views: 49970

Answers (4)

JavaTec
JavaTec

Reputation: 1044

Here is a sample working code and caters to the following: 1) increases and decreases the counter by one 2) does not use continuous iteration 3) does not use ng-init 4) works for $scope.count = 15

(The replies already provided by Rasalom and smallatom helped and so did the link: http://www.w3schools.com/angular/angular_events.asp )

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
    <button ng-click="count = count+1">
        Increment
    </button>
    count: {{ count }}

    <button ng-click="count = count-1">
        Decrement
    </button>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = 15;
});
</script> 

</body>
</html>

Upvotes: 0

Steven Keith
Steven Keith

Reputation: 1799

"Exactly 1 value to be incremented or decremented"

<div ng-controller="CounterController">
  <button ng-click="increment();">
    Increment
  </button>
  count: {{count}}

  <button ng-click="decrement();">
    Decrement
  </button>
<div>

Controller:

angular.module('myApp', [])
.controller('CounterController', function($scope) {
  var incremented = false;
  var decremented = false;
  $scope.count = 15;

  $scope.increment = function() {
    if (incremented) { return; }
    $scope.count++;
    incremented = true;
  };
  $scope.decrement = function() {
    if (decremented) { return; }
    $scope.count--;
    decremented = true;
  };
});

If you want the user to be able to repeatedly do this, then...

angular.module('myApp', [])
.controller('CounterController', function($scope) {
   $scope.count = 15;
   var max = $scope.count + 1;
   var min = $scope.count - 1;

  $scope.increment = function() {
    if ($scope.count >= max) { return; }
    $scope.count++;
  };
  $scope.decrement = function() {
    if ($scope.count <= min) { return; }
    $scope.count--;
  };
});

JS Fiddle - http://jsfiddle.net/HB7LU/8673/

Upvotes: 3

kriznaraj
kriznaraj

Reputation: 484

Simply this should work,

<div>
    <button ng-click="count = count+1" ng-init="count=15">
        Increment
    </button>
    count: {{count}}

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

Upvotes: 9

Rasalom
Rasalom

Reputation: 3111

The problem is because you using '{{' in ng-click, it's inserting value there, so after angular 'rendering', actual code looks like: 

<div ng-controller="CounterController">
  <button ng-click="count = 15+1" ng-init="count=15">
    Increment
  </button>
  count: {{count}}

  <button ng-click="count = 15 - 1">
    Decrement
  </button>
<div>

but you want to work with reference. So just remove '{{' and '}}' and it will work.

Upvotes: 3

Related Questions