increment and decrement of a counter for the list in angularjs

Question

I have a list of items coming from database and the items are selected by the user and as per their selection they can add the quantity of selected item by just incrementing or decrementing the counter onClick of the signs(+,-).And i have done it this way

 <table   class="table table-hover"><tr ng-repeat="samData in sampleData">
<td >{{samData}}</td>
<td> <a ng-click="increment()">+ {{count}}</a>
  <a ng-click="decrement()" >-</a>
</td><td>

controller js:

 $scope.decrement = function() {
             $scope.count = $scope.count - 1;
            if ($scope.count < 0){
              $scope.count = 0;
           }
   };
      $scope.increment = function() {
       $scope.count = $scope.count + 1;
};

but the problem is as i click on any particular "td" all the counters gets affected which i don't want plz tel me how to associate the counter to each record and accordingly make the changes to the only clicked 'td'

count should be a property of samData e.g. samData.count ?? Are you missing anything here. — msapkal
– msapkal, Commented Aug 5, 2014 at 10:36
Add a counter to each sampleData and pass it as a parameter to increment and decrement — Gruff Bunny
– Gruff Bunny, Commented Aug 5, 2014 at 10:37

Michael Kang · Accepted Answer · 2014-08-05 10:37:24Z

2

Try moving your controller inside your ng-repeat:

<table   class="table table-hover"><tr ng-repeat="samData in sampleData">
<td >{{samData}}</td>
<td ng-controller="controller"> <a ng-click="increment()">+ {{count}}</a>
  <a ng-click="decrement()" >-</a>
</td><td>

answered Aug 5, 2014 at 10:37

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Malkus Over a year ago

Right, but count wouldn't be available to the parent controller correct?

Michael Kang Over a year ago

That's correct, but as far as I can see, it doesn't need to be. count is only referenced inside the controller. By placing the ng-controller inside of the ng-repeat, each iteration will have its own controller scope, and hence its own 'count' variable on that scope.

t0mpl · Accepted Answer · 2014-08-05 10:36:19Z

1

that's normal, you have a count for all your samdata, you need a particular one for each

try it

<td ng-init="samData.count = 0"> <a ng-click="samData.count = samData.count + 1">+      {{samData.count}}</a>
<a ng-click="samData.count = samData.count - 1" ng-if="samData.count > 0">-</a>

answered Aug 5, 2014 at 10:36

t0mpl

5,0553 gold badges34 silver badges37 bronze badges

Comments

Malkus · Accepted Answer · 2014-08-05 10:46:54Z

0

Don't forget your $scope variable can be a JSON object. So use a value and count attribute.

You can also pass in the current value from an ng-repeat and it is used as a pointer to the record in the row.

html

<table  class="table table-hover">
    <tr ng-repeat="samData in sampleData">
        <td>{{samData.value}}</td>
        <td><a ng-click="increment(samData)">+ {{samData.count}}</a>
            <a ng-click="decrement(samData)" >-</a></td>
    </tr>
<table>

controller js

$scope.decrement = function(samData) {
     if(sameData.count > 0) {
         samData.count = samData.count - 1;
     }
}

$scope.decrement = function(samData) {
    samData.count = samData.count + 1;
}

For this implementation you would need to initialize samData.count or check for it's existence before adjusting the values

edited Aug 5, 2014 at 10:46

answered Aug 5, 2014 at 10:37

Malkus

3,7262 gold badges27 silver badges39 bronze badges

1 Comment

lars k. Over a year ago

Shouldn't you check for existance of this count attribute, and set the attribute if it was not set before? Or you have to change the JSON object so it has that count attribute BEFORE you enter this ng-repeat.

Collectives™ on Stack Overflow

increment and decrement of a counter for the list in angularjs

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related