单击ng-repeat中的项目时如何递增计数器?

时间:2015-09-05 18:06:18

标签: javascript jquery html css angularjs

我已经生成了一个带有ng-repeat的列表,其中每个项目都有一个count变量。在每个列表项中,我都有一个链接。

我想点击链接时增加点数。

我尝试了以下方法,但它不起作用。

我的控制器: -

myApp.controller('allpost', function ($scope, $http, $stateParams, Allposts) {
    var id = $stateParams.id;
    Allposts.GetAllposts(id).then(
        function (response) {
            $scope.allPosts = response.data.posts;
        });

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

并查看如下: -

<ion-content class="padding" lazy-scroll>
<div class="row no-padding HomeRowsList">

<div class="item itemfull" ng-repeat="post in allPosts">
        <div class="item item-body">
            <div>
                <div class="title-news">
                    <div class="title" ng-bind-html="post.content"></div>
                    <div class="countbg">عدد المرات : {{post.custom_fields.azkarno}}</div>
                    <span>{{post.count}}</span><a onclick="ctrl(post);">Increment</a>
                </div>
            </div>
        </div>
    </div>

</div>
</ion-content>

2 个答案:

答案 0 :(得分:0)

应该是ng-click而不是onclick&amp;方法名称应为increment,而不是ctrl

同样从ctrl方法中删除不必要的increment函数包装器,这根本不需要,因为你想从html调用的任何内容都应该包含在控制器的$scope中。

<强>标记

<span>{{post.count}}</span><a ng-click="increment(post);">Increment</a>

答案 1 :(得分:0)

在控制器使用中

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

而不是

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

并在html中使用

<span>{{post.count}}</span><a data-ng-click="increment(post)">Increment</a>

而不是

<span>{{post.count}}</span><a onclick="ctrl(post);">Increment</a>