6

各項目にカウント変数がある ng-repeat を使用してリストを生成しました。リストアイテムにリンクがあり、クリックするとカウントを増やしたいと思います。

これをAngular-JSの方法で解決する手がかりがありません。

プランカー

<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の方法に興味があります。

4

4 に答える 4

8

ng-click次のように、各行のデータ モデルを操作するために使用できます。

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

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

このようにコントローラーをラップしてください<body ng-controller="ctrl">

DEMO

于 2013-08-21T14:58:54.373 に答える
1

これは解決策です

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js">                                                </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 ng-click="item.count = item.count + 1">Increment</a>
    </li>
  </ul>
 </div>
 </body>
 </html>
于 2013-08-21T15:17:09.263 に答える