將訂單項添加到購物車

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>