CODEWITHSUNDEEP
javascriptangularjshtmlincrementangularjs-ng-click
panagulis72
panagulis72

Reputation: 2169

Increment number in ANGULAR doesn't work

I'm doing an application, there are a virtual keyboard that shows when you click on the input. The decrement should be decrement the ng-model food.Pezzi, and it works fine. But the increment doesn't work: it add a '1'. Why? PLUNKER CODE

(the weird thing is that you press Decrement before to press Increment, increment works....)

Markup

<td>
    <a data-role="button" data-theme="e" ng-click="food.Pezzi = food.Pezzi-1; " 
      style="background-color: rgba(246, 246, 246, 0.2); border-color: rgba(0, 0, 0, 0.27); text-shadow: 0px 1px 0px #F3F3F3;color: #333;">
         Decrement
  </a>
</td>
<td>
    <a data-role="button" data-theme="b" class="zero" ng-click='food.Pezzi=food.Pezzi.toString()+"0"'>
        0
    </a>
</td>
<td>
    <a data-role="button" data-theme="e" class="pos" ng-click='food.Pezzi = food.Pezzi + 1' 
      style="background-color: rgba(246, 246, 246, 0.2); border-color: rgba(0, 0, 0, 0.27); text-shadow: 0px 1px 0px #F3F3F3;color: #333;">
        Increment
      </a>
</td>

Thank you in advice

Upvotes: 2

Views: 1038

Answers (2)

Shashank Agrawal
Shashank Agrawal

Reputation: 25797

Change your code to var itemToClone = { "Selection": "", "Pezzi": 0 }; instead of var itemToClone = { "Selection": "", "Pezzi": "" };. You are initializing with an empty string to it's appending to the string instead of adding a number.

Same goes at other places. You have to type cast the string using parseInt after you are modifying your input.

Update

That weired. Let's add a method in your controller like this:

$scope.inc = function(food) {
    food.Pezzi = food.Pezzi || "0"
    food.Pezzi = parseInt(food.Pezzi.toString()) + 1;
};

Now, modify your increment button's ng-click to like this: ng-click="inc(food)"

Upvotes: 2

Hitmands
Hitmands

Reputation: 14189

First of all you're using AngularJS in a bad way, never put Business Logic in your views.

By the way, your bug depends on the type of the property Pezzi, for mathematical operation you need to work with numbers, but, in javascript, the + operator is used even for string concatenation... have a look on the two following examples: (the first is correct, the second, because loses the type, in addition performs a string concatenation instead of a sum).

angular
  .module('test', [])
  .controller('TestCtrl', function($scope) {
    var vm = $scope;
  
    vm.food = { pezzi: 0 };
    
    vm.increment = function() { vm.food.pezzi += 1; };
    vm.decrement = function() { if(vm.food.pezzi > 0) vm.food.pezzi -= 1;   };
    vm.reset = function() { vm.food.pezzi = 0; };

    vm.getType = function() {
      return typeof vm.food.pezzi;
    }
    
      
    vm.foodCloned = { pezzi: 0 + '' };
    
    vm.incrementCloned = function() { vm.foodCloned.pezzi += 1 + ''; };
    vm.decrementCloned = function() { vm.foodCloned.pezzi -= 1 + ''; };
    vm.resetCloned = function() { vm.foodCloned.pezzi = 0 + ''; };

    vm.getClonedType = function() {
      return typeof vm.foodCloned.pezzi;
    }
    
  })
;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<article ng-app="test">
  <div ng-controller="TestCtrl">
    
    <button ng-click="decrement($event)">Decrement</button>
    <button ng-click="increment($event)">Increment</button>
    <button ng-click="reset($event)">Reset</button>
    
    
    <h1 ng-bind="food | json"></h1>
    <div ng-bind="getType()"></div>
    <hr><hr>
    
    
    <button ng-click="decrementCloned($event)">Decrement</button>
    <button ng-click="incrementCloned($event)">Increment</button>
    <button ng-click="resetCloned($event)">Reset</button>
    
    
    <h1 ng-bind="foodCloned | json"></h1>
    <div ng-bind="getClonedType()"></div>
  </div>
</article>

Upvotes: 2

Related Questions