将订单项添加到购物车

Question

我们正在开发一个Web应用程序，该应用程序使用户可以选择添加订单项，并可以选择更改价格，数量和说明。

我们以某种方式设法完成了这些工作，而我们的工作就在这里：

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以使用item参数，并使用$scope.selected模型进行更新

Answer 3

尝试这个 ;）

 function CartForm($scope) { $scope.searchInfo = []; $scope.total = 0; $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(); }; $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(); }; } 

 <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>