使用Angular形式递增递减量

Question

我试图在我的表单上为产品列表实现增量/减量功能。我们的想法是能够通过产品数量实时更新购物车，将产品添加到购物车。

我从Angular文档中看到了这个代码示例，我认为可以解决这个问题。 http://docs.angularjs.org/api/ng/directive/ngClick

我期待的是，当我第一次点击产品时，它会添加产品以形成参数，然后每次点击产品时增加（另一个解决方案是设置html5数字字段，但仍然会出现问题形式字段逻辑）

"order": [{"product_id": "2", "quantity": "10"}, {"product_id": "5", "quantity": "12"}]

我的问题是： - 我无法使用formData获得正确的表单（product_id * quantity） - 增量数量函数是关闭的

Plunker http://plnkr.co/edit/lCZUXpTeJqGkOllXaS2t?p=preview

<form ng-submit="processForm()">
  <pre>{{ formData }}</pre>

    <ul ng-repeat="product in filtered = (products | orderBy:['name'] | filter:q)">
      <li>{{ product.name }}
         <a ng-click="count = count + 1" ng-init="count=0" ng-model="formData.products">Increment - count: {{count}}
          <input type="number" ng-model="formData.{{product.id}}" />
     </a>
   </li>
  </ul>
</form>

Answer 1

您只能通过绑定ng-model来设置数量，但是您希望设置一个完整的对象{product_id: x, quantity: y} ...

所以使用ng-change而不是ng-model来设置formData ...

<强> HTML

<input type="number" ng-model="quantity" placeholder="product_{{product.id}}" 
ng-change="changeQuantity($index, product.id, quantity)">

<强> CONTROLLER

$scope.changeQuantity =function (index, productId, quantity) {
   $scope.formData[index] = {product_id: productId, quantity: quantity};
};

此处正在运作PLUNKER