Question

我使用ng-repeat生成了一个列表，其中每个项目都有一个计数变量。在列表项中我有一个链接，我想在点击它时增加计数。

我无法用Angular-JS方式解决这个问题。

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>

  <script>
    function increment() {

    }

  </script>
</head>

<body>
  <div ng-init="items = [
  {name:'fruit', count:4},
  {name:'car', count:1},
  {name:'dog', count:2}
  ]">
    <ul>
      <li ng-repeat="item in items">
        <span>Count:</span>
        <span>{{item.count}}</span>
        <a onclick="increment();">Increment</a>
      </li>
    </ul>
  </div>
</body>

使用JQuery我会为span分配一个唯一的id，使用一些计数器变量，传递此id来递增，找到html对象并更新。但我很好奇Angular的做法。

Answer 1

您可以使用ng-click来操纵每一行的数据模型，如下所示：

function ctrl($scope) {
  $scope.increment = function(item){
    item.count += 1;
  }
}

<a ng-click="increment(item);">Increment</a>

确保将控制器包裹起来，如<body ng-controller="ctrl">

的 DEMO

Answer 2

<a ng-click="item.count = item.count + 1">Increment</a>

Answer 3

http://plnkr.co/edit/jh4UIt?p=preview

只需用ng-click替换onclick =＆＃34; item.count = item.count + 1＆＃34;并给出一个href属性。

<a ng-click="item.count = item.count+1" href="">Click</a>

Answer 4

这是一个解决方案

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js">                                                </script>
  </head>
<body>
  <div ng-init="items = [
   {name:'fruit', count:4},
   {name:'car', count:1},
   {name:'dog', count:2}
   ]">
  <ul>
    <li ng-repeat="item in items">
     <span>Count:</span>
     <span>{{item.count}}</span>
     <a ng-click="item.count = item.count + 1">Increment</a>
    </li>
  </ul>
 </div>
 </body>
 </html>

使用ng-repeat生成的项目中的增量计数器

4 个答案: