在每次 ng-click 时增加 ng-repeat 的计数

Question

step-1- Todo值会随着每次点击相应的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>

第 2 步 - 如何在每次点击时将 'count' 和待办事项 'id' 放入我的函数中

问题（这里有问题）

我的代码（我知道错了）

<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

Answer 1

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

Fiddle

Bhesh Gurung a resource 提供了一些关于为什么增量运算符 (++) 对我们不起作用的见解：

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.

还值得注意的是，每个按钮都有自己的作用域，因此计数会独立增加。

Answer 2

在这里你可以如何做到这一点

只需在addLike函数中增加计数

<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++;
    }
 }
};

Answer 3

主要思想是将您的对象传递给处理程序并对其进行修改。

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>

Answer 4

如果要持久化计数数据，最好委托给工厂：

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;
    }    
})

我使用的是 $scope，但你也可以使用 controllerAs 语法，这是推荐的方式 (http://toddmotto.com/digging-into-angulars-controller-as-syntax/)

在每次 ng-click 时增加 ng-repeat 的计数

increase count in ng-repeat on every ng-click

javascript

angularjs

ng-repeat