增加或减少产品清单中的数量

时间:2015-08-29 16:02:56

标签: angularjs

我有一个产品清单,每个产品上都有正负输入按钮来控制数量。

处理数量功能变更的最佳方法是什么?按下数量按钮时,显示当前数量的标签应反映更改。

1 个答案:

答案 0 :(得分:1)

这是一个有你描述的场景的傻瓜

http://plnkr.co/edit/WCrvWl471AMqjyq1yl3m?p=preview

HTML代码

   <div ng-repeat="item in itemList">
    <p>{{item.name}}</p>
    <p>{{item.quantity}}</p>
    <a class="button" ng-click="increaseItemCount(item)">+</a>
    <a class="button" ng-click="decreaseItemCount(item)">-</a>
  </div>
  <p> TOTAL</p>

控制器代码       

    $scope.itemList = [{
    "name": "item1",
    "quantity": "0"
  }, {
    "name": "item2",
    "quantity": "0"
  }, {
    "name": "item3",
    "quantity": "0"
  }];
  $scope.increaseItemCount = function(item) {
    item.quantity++;
  };
  $scope.decreaseItemCount = function(item) {
    if (item.quantity > 0) {
      item.quantity--;
    }

  };
  $scope.sumCalc = function() {
    var sum = 0;
    angular.forEach($scope.itemList, function(item, index) {
      sum += parseInt(item.quantity,10);
    });
    return sum;
  };