与NG重复生成的项目增加计数器 [英] Increment counter in item generated with ng-repeat
问题描述
我产生与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.
<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屋!