将订单项添加到购物车

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

如果您每当用户更改数量，成本和具有相同项目产品n的其他行时，请检查所述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模型更新它

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>