将订单项添加到购物车

Question

We are working on a web application which gives option to users to add line items and an option to change the price, quantity and the description.

We somehow managed to get these done and our work is here:

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

Problem illustrated in here: http://i.giphy.com/3o6EhMulFzJPoXzKms.gif

My JAVASCRIPT is below:

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

If you check with the said URL, whenever the user changes the quantity, cost, the other rows having the same item product name are also getting changed. Quantity, Cost are unique by row and should not change.

I don't know what mistake I did.

Can anyone help me get this completed, a big thanks in advance!

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

The index of the invoice.selectedItems and selected model conflict with $scope.selected..

See the working Fiddle here: http://jsfiddle.net/75m7e/2069/

rater than passing the index, i updated the code to pass the item from ng-repeat and ng-change method to use item parameter and update it with the $scope.selected model

Answer 3

Try this ;)

 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>