将订单项添加到购物车

Question

我们正在开发一个网络应用程序，为用户提供添加订单项的选项以及更改价格，数量和说明的选项。

我们设法完成了这些工作，我们的工作就在这里：

http://jsfiddle.net/75m7e/2067/

此处说明的问题：http://i.giphy.com/3o6EhMulFzJPoXzKms.gif

我的JAVASCRIPT如下：

function CartForm($scope) {
        $scope.searchInfo = [];
    $scope.invoice = {
        items: [{
              product_name: 'x',
              qty: 10,
              description: 'item',
              cost: 9.95
            },
            {
              product_name: 'y',
              qty: 170,
              description: 'item',
              cost: 8
            },
            {
              product_name: 'z',
              qty: 150,
              description: 'item',
              cost: 7
              }],
         selectedItem : []
    };

    $scope.addItem = function() {
        $scope.invoice.selectedItem.push({
            qty: null,
            description: null,
            cost: null,
            product: null,
            total: null
        });
    };

    $scope.removeItem = function(index) {
        $scope.invoice.selectedItem.splice(index, 1);
    };

    $scope.total = function() {
        var total = 0;
        $scope.invoice.selectedItem.forEach(function(item, index){
            total += item.total;
        })
        return total;
    };

    $scope.calculateTotal = function(selected, index){
        $scope.invoice.selectedItem[index].description = selected.description;
      $scope.invoice.selectedItem[index].qty = selected.qty;
      $scope.invoice.selectedItem[index].cost = selected.cost;
      $scope.invoice.selectedItem[index].product = selected.product;
      $scope.invoice.selectedItem[index].total = selected.qty*selected.cost;
    };
}

如果您使用上述URL进行检查，则只要用户更改数量，成本，具有相同商品名称的其他行也会更改。数量，成本按行是唯一的，不应更改。

我不知道我做了什么错误。

任何人都可以帮我完成这件事，提前表示非常感谢！

Answer 1

function CartForm($scope) {
        $scope.searchInfo = [];
    $scope.invoice = {
        items: [{
              product_name: 'x',
              qty: 10,
              description: 'item',
              cost: 9.95
            },
            {
              product_name: 'y',
              qty: 170,
              description: 'item',
              cost: 8
            },
            {
              product_name: 'z',
              qty: 150,
              description: 'item',
              cost: 7
              }],
         selectedItem : []
    };

    $scope.addItem = function() {
        $scope.invoice.selectedItem.push({
            qty: null,
            description: null,
            cost: null,
            product: null,
            total: null
        });
    };

    $scope.removeItem = function(index) {
        $scope.invoice.selectedItem.splice(index, 1);
    };

    $scope.totalFinel = function() {

        //console.log('test');

        var total = 0;
      //  alert(total);
        $scope.invoice.selectedItem.forEach(function(item, index){
            total += item.total;
          alert(item.total);
        })
       // return total;
       $scope.total=total;
    };

    $scope.calculateTotal = function(selected, index){
        $scope.invoice.selectedItem[index].description = selected.description;
      $scope.invoice.selectedItem[index].qty = selected.qty;
      $scope.invoice.selectedItem[index].cost = selected.cost;
      $scope.invoice.selectedItem[index].product = selected.product;
      $scope.invoice.selectedItem[index].total = selected.qty*selected.cost;
      $scope.totalFinel();  
    };
}

Answer 2

invoice.selectedItems和所选模型的索引与$ scope.selected ..

冲突

请在此处查看工作小提琴：http://jsfiddle.net/75m7e/2069/

比传递索引更新，我更新了代码以将项目从ng-repeat和ng-change方法传递到使用item参数并使用$scope.selected模型更新< / p>

Answer 3

试试这个;）

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="http://d1e24pw9mnwsl8.cloudfront.net/c/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<h2>Shopping Card Example</h2>
<div ng:app ng:controller="CartForm">
  <table class="table">
    <tr>
      <th>Product</th>
      <th>Description</th>
      <th>Qty</th>
      <th>Cost</th>
      <th>Total</th>
      <th></th>
    </tr>
    <tr ng:repeat="item in invoice.selectedItem">
      <td>
        <select ng-options="item as item.product_name for item in     invoice.items" ng-model="selected" ng-change="calculateTotal(selected, $index)"></select>
      </td>
      <td>
        <input type="text" ng:model="selected.description" class="input-small">
      </td>
      <td>
        <input type="number" ng:model="selected.qty" ng:required class="input-mini" ng-change="calculateTotal(selected, $index)">
      </td>
      <td>
        <input type="number" ng:model="selected.cost" ng:required class="input-mini" ng-change="calculateTotal(selected, $index)">
      </td>
      <td>{{invoice.selectedItem[$index].total | currency}}</td>
      <td>
        [<a href ng:click="removeItem($index)">X</a>]
      </td>
    </tr>
    <tr>
      <td><a href ng:click="addItem()" class="btn btn-small">add item</a></td>
      <td></td>
      <td>Total:</td>
      <td>{{total | currency}}</td>
    </tr>
  </table>
</div>

Delete