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

2023-12-31

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

我不知道如何用 Angular-JS 方式解决这个问题。

Plunker http://plnkr.co/edit/HfeLw8uHWcqPN3Xzx8sN

<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 对象并更新。但我对 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 http://plnkr.co/edit/Bx63dAwihx1Dl6xvBFeS?p=preview

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

随机推荐