increase count in ng-repeat on every ng-click

Question

step-1- Todo value will increase every click on correspond todo

<li class="list-group-item" ng-repeat="todo in todos">
    <span ng-click="count = count + 1" ng-init="count=0"> value= {{count}} </span>
</li>

step-2 - How can i get 'count' and todo 'id' into my function on each click

Question (problem here)

my code (I know its wrong)

<li class="list-group-item" ng-repeat="todo in todos">
    <span ng-click="addLike(todo._id) (count = count + 1)" ng-init="count=0"> value= {{count}} </span>
</li>

function TodoCtrl($scope) {
  $scope.todos =  [
      {text:'todo one'},
      {text:'todo two', done:false}
  ]
};

jsfiddle

I don't think you need to init `count`. It's zero on load regardless. — isherwood, Sep 16 '15 at 14:14
@isherwood: What you suggested in your answer works if you use `count = count + 1;` instead of `count++;`. Not sure why. — Bhesh Gurung, Sep 16 '15 at 14:34

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

ng-click="count=count+1; addLike(todo._id, count)"

Fiddle

Bhesh Gurung provided a resource with to some insight as to why the increment operator (++) won't work for us:

Since ++points isn't a valid Angular expression, what happens? The helpful error message in the console points us in the right direction:

Error: [$parse:syntax] Syntax Error: Token '+' not a primary expression at column 2 of the expression [++points] starting at [+points]

From this message, we see that our expression used some unsupported syntax (in this case, the pre-increment operator ++). The error message is thrown by the very magical core Angular service, $parse.

It's also worth noting that each button has its own scope, so the count increments independently.

In case you want to know why `++` doesn't work, you can find an explanation [here](http://blog.pathgather.com/blog/2014/12/7/learning-angularjs-magic-expressions). — Bhesh Gurung, Sep 16 '15 at 14:53

maddygoround · Answer 2 · 2015-09-16T14:39:09.687

here how you can do this

Simply increase the count in the addLike function

<li class="list-group-item" ng-repeat="todo in todos">
    <span ng-click="addLike(todo._id,this)"> value= {{todo.count}} </span>
</li>

function TodoCtrl($scope) {
    $scope.todos = [{
        text: 'todo one'
    }, {
        text: 'todo two',
        done: false
    }]

 $scope.addLike = function(todoid, obj) {
    if (obj.todo.count == undefined) {
        obj.todo.count = 1;
    } else {
        obj.todo.count++;
    }
 }
};

score 2 · Answer 3 · answered Sep 16 '15 at 14:34

Main idea is pass into the handler your object and modify it.

var myApp = angular.module('myApp', []);

function TodoCtrl($scope) {
    $scope.todos = [{
        text: 'todo one'
    }, {
        text: 'todo two',
        done: false
    }];
    $scope.likeIt = function likeIt(model) {
        model.count = model.count + 1 || 1;
    }
};

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
    <ul ng-controller="TodoCtrl">
        <li class="list-group-item" ng-repeat="todo in todos">{{todo.text}}
            <button class="btn btn-default" ng-click="likeIt(todo)">value- {{todo.count || 0}}</button>
        </li>
    </ul>
</div>

score 1 · Answer 4 · answered Sep 16 '15 at 14:34

If you want to persist the count data, best delegate to a factory:

HTML

<div ng-app="myApp">
   <ul ng-controller="TodoCtrl">
      <li class="list-group-item" ng-repeat="todo in todos">
      {{todo.text}}
    <button class="btn btn-default" ng-click="count(todo)"> value- {{todo.count}} </button>

    </li>
   </ul>
</div>

JS

var myApp = angular.module('myApp', []);

myApp.factory('todosFact', function(){
    var todos =  [
      {text:'todo one', count: 0},
      {text:'todo two', done:false, count: 0}
    ]
    return todos
})

myApp.controller('TodoCtrl', function(todosFact, $scope){
    $scope.todos = todosFact;
    $scope.count = function count(todo){
        todo.count++;
        return;
    }    
})

I'm using $scope, but you could also use the controllerAs syntax, it is the recommended way (http://toddmotto.com/digging-into-angulars-controller-as-syntax/)

increase count in ng-repeat on every ng-click

4 Answers4