Hinzufügen von Werbebuchungen zum Einkaufswagen

Question

Wir arbeiten an einer Webanwendung, die Benutzern die Option zum Hinzufügen von Werbebuchungen und eine Option zum Ändern von Preis, Menge und Beschreibung bietet.

Wir haben es geschafft irgendwie ist hier diese getan und unsere Arbeit zu bekommen:

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

Problem hier dargestellt: http://i.giphy.com/3o6EhMulFzJPoXzKms.gif

Mein JAVASCRIPT unten:

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

Wenn Sie Überprüfen Sie mit der besagten URL, wann immer der Benutzer die Menge und die Kosten ändert, während die anderen Zeilen das gleiche Produkt n haben ame werden auch geändert. Menge, Kosten sind nach Zeile eindeutig und sollten sich nicht ändern.

Ich weiß nicht, welchen Fehler ich gemacht habe.

Kann mir jemand helfen, das fertig zu bekommen, ein großes Dankeschön im Voraus!

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

Der Index der invoice.selectedItems und ausgewählten Modell Konflikt mit scope.selected $ ..

Siehe Arbeits Fiddle hier: http://jsfiddle.net/75m7e/2069/

rater als der Index vorbei, ich den Code aktualisiert das Element aus ng-repeat und ng-change Methode zu übergeben item Parameter verwenden und es mit dem $scope.selected Modell

Answer 3

Try this aktualisieren;)

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>