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

发布时间：2020-12-17 08:50:57 所属栏目：安全来源：网络整理

导读：我用ng-repeat生成了一个列表,其中每个项目都有一个count变量.在列表项中我有一个链接,我想在点击它时增加计数. 我没有线索以Angular-JS方式解决这个问题. Plunker head script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"/scr

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

我没有线索以Angular-JS方式解决这个问题.

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,我会为span分配一个唯一的id,使用一些计数器变量,传递此id来递增,找到html对象并更新.但我很好奇Angular的做法.

您可以使用ng-click操作每行的数据模型,如下所示：

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

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

确保你把控制器包起来像这样< body ng-controller =“ctrl”>

DEMO

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!