Question

我有一个来自数据库的项目列表，这些项目由用户选择，根据他们的选择，他们可以通过递增或递减计数器onClick（+， - ）来添加所选项目的数量。我这样做了

 <table   class="table table-hover"><tr ng-repeat="samData in sampleData">
<td >{{samData}}</td>
<td> <a ng-click="increment()">+ {{count}}</a>
  <a ng-click="decrement()" >-</a>
</td><td>

控制器js：

 $scope.decrement = function() {
             $scope.count = $scope.count - 1;
            if ($scope.count < 0){
              $scope.count = 0;
           }
   };
      $scope.increment = function() {
       $scope.count = $scope.count + 1;
};

但问题是当我点击任何特定的“td”时，所有的计数器都会受到影响，这是我不想要的请告诉我如何将计数器与每条记录相关联，并相应地对仅点击的'td'进行更改

Answer 1

尝试在ng-repeat中移动控制器：

<table   class="table table-hover"><tr ng-repeat="samData in sampleData">
<td >{{samData}}</td>
<td ng-controller="controller"> <a ng-click="increment()">+ {{count}}</a>
  <a ng-click="decrement()" >-</a>
</td><td>

Answer 2

这是正常的，你有所有samdata的计数，你需要一个特定的samdata

试试吧

<td ng-init="samData.count = 0"> <a ng-click="samData.count = samData.count + 1">+      {{samData.count}}</a>
<a ng-click="samData.count = samData.count - 1" ng-if="samData.count > 0">-</a>

Answer 3

不要忘记你的$ scope变量可以是一个JSON对象。所以使用value和count属性。

您还可以从ng-repeat传入当前值，并将其用作指向行中记录的指针。

<强> HTML

<table  class="table table-hover">
    <tr ng-repeat="samData in sampleData">
        <td>{{samData.value}}</td>
        <td><a ng-click="increment(samData)">+ {{samData.count}}</a>
            <a ng-click="decrement(samData)" >-</a></td>
    </tr>
<table>

控制器js

$scope.decrement = function(samData) {
     if(sameData.count > 0) {
         samData.count = samData.count - 1;
     }
}

$scope.decrement = function(samData) {
    samData.count = samData.count + 1;
}

对于此实现，您需要初始化samData.count或在调整值之前检查它是否存在

增加和减少angularjs中列表的计数器

3 个答案: