与NG重复生成的项目增加计数器 [英] Increment counter in item generated with ng-repeat

查看:123
本文介绍了与NG重复生成的项目增加计数器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我产生与NG重复,每个项目都有一个计数变量列表。在我有一个链接时listItems,我想增加计数,当我点击它。

I generated a list with ng-repeat, where each item has a count variable. In the listitems I have a link, I want to increment the count when I click it.

我没有一个线索角JS的方式来解决这个问题。

I don't have a clue to solve this in Angular-JS way.

Plunker

<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我会分配跨度唯一的ID,使用一些计数器变量,通过这个ID来递增,找到HTML对象和更新。但我好奇的角度的方式来做到这一点。

With JQuery I would assign the span a unique id, using some counter variable, pass this id to increment, find the html object and update. But I'm curious about an Angular way to do it.

推荐答案

您可以使用 NG-点击来操纵像这样每一行的数据模型:

You can use ng-click to manipulate the data model for each row like this:

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

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

请确保你把控制器来包装它像这样&LT;机身NG控制器=CTRL&GT;

Make sure you put the controller to wrap it like this <body ng-controller="ctrl">

<大骨节病> 演示

这篇关于与NG重复生成的项目增加计数器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆