Question

我有一个Angular SPA，其中包含一个用户可以添加项目的购物车（数组）。我想阻止用户将任何特定商品添加到购物车两次。

function CartForm($scope) {

  $scope.products = [{
    "description": "BB-8 Droid",
    "qty": "1",
    "cost": "99"
  }, {
    "description": "C-3PO Droid",
    "qty": "1",
    "cost": "499"
  }, {
    "description": "R2-D2 Astromech Droid",
    "qty": "1",
    "cost": "899"
  }, {
    "description": "R5-D4 Astromech Droid",
    "qty": "1",
    "cost": "899"
  }, {
    "description": "IG-88 Bounty Hunter Droid",
    "qty": "1",
    "cost": "899"
  }];
  $scope.invoice = {
    items: []
  };

  $scope.addItem = function(product) {
      $scope.invoice.items.push(product);
    },

    $scope.removeItem = function(index) {
      $scope.invoice.items.splice(index, 1);
    },

    $scope.total = function() {
      var total = 0;
      angular.forEach($scope.invoice.items, function(item) {
        total += item.qty * item.cost;
      })

      return total;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<h2>Shopping Cart Example</h2>
<div ng:controller="CartForm">
  <table class="table">
    <thead>
      <th>Description</th>
      <th>Qty</th>
      <th colspan="2">Price</th>
    </thead>
    <tr ng-repeat="product in products">
      <td>{{product.description}}</td>
      <td>{{product.qty}}</td>
      <td>{{product.cost | currency }}</td>
      <td>
        <button class="btn btn-danger" ng-click="addItem(product)">ADD TO CART</button>
    </tr>
  </table>
  <table class="table">
    <tr>

      <th>Description</th>
      <th>Qty</th>
      <th>Cost</th>
      <th>Total</th>
      <th></th>
    </tr>
    <tr ng:repeat="item in invoice.items">
      <td>
        <input type="text" ng:model="item.description" class="input-small">
      </td>
      <td>
        <input type="number" ng:model="item.qty" ng:required class="input-mini">
      </td>
      <td>
        <input type="number" ng:model="item.cost" ng:required class="input-mini">
      </td>
      <td>{{item.qty * item.cost | currency}}</td>
      <td>
        [<a href ng:click="removeItem($index)">X</a>]
      </td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>Total:</td>
      <td>{{total() | currency}}</td>
    </tr>
  </table>
</div>

请在此处查看JSFiddle：http://jsfiddle.net/tedleeatlanta/22591h2y/15/

Answer 1

您可以为AddItem添加一些逻辑来处理所有这些问题。

这不是最优雅的方式，但会让你朝着正确的方向前进 - 这样的事情很有效：

    $scope.addItem = function(product) {
            var exist = false;
            for(var i = 0; i < $scope.invoice.items.length;i++){
                if ($scope.invoice.items[i].description==product.description)
                {
// having to use parseInt here because your Qty isn't a number...naughty naughty
                    $scope.invoice.items[i].qty  = parseInt($scope.invoice.items[i].qty)+1;
                    exist = true;
                }
            }
            if (!exist)
                $scope.invoice.items.push(product);
        },

如果数量已经存在，则增加数量，如果数量不存在则增加数量

看到它在这里运行http://jsfiddle.net/22591h2y/16/

或者，对于不需要parseInt的东西 - 将你的对象数量改为整数而不是字符串。

请参阅此更新http://jsfiddle.net/22591h2y/17/

AngularJS：防止数组中的项目再次添加

1 个答案: