6
votes

Angularjs Comment calculer les données de répétition NG présentées dans l'élément d'entrée

J'ai des données JSON de éléments = []; affichés dans (1ère table) à l'aide de NG-REPEAT. L'utilisateur peut alors ajouter cette ligne à l'aide de l'indice ng-répéter $ à un autre tableau itemsPos = [] à l'aide de la fonction Push (), ce tableau est alors affiché dans un autre < Code>

(2e table) à l'aide de la répétition NG. Donc de itemsPos = [] Les données sont affichées dans des champs de saisie tels que item #, élémentdescription, prix . Qu'est-ce que j'essaie de faire après cela, j'ai ajouté des champs Qté , réduction et total que si j'essaie de mettre des valeurs dans la quantité, elle recalculera le total Tout comme ce plunker: HTTP : //plnkr.co/edit/r3lon9? P = Aperçu . Mais sur ma version, c'est dans une table.

Ce que je suis confronté, c'est si j'ai ajouté deux rangées pour itempos = [] , si je modifie la 1ère rangée Qté , il calcule le total de la 2e rangée. ** Tout comme l'image ci-dessous **

 Entrez la description de l'image ici

Mon code pour mettre des éléments à destinationPos = []; < Pré> xxx

code pour calculer total xxx

update la 1ère table xxx

2e table xxx


1 commentaires

Pouvez-vous partager le code HTML aussi?


8 Réponses :


5
votes

Au lieu de passer le Qnty code> à Changeqty code> Fonction que vous devez passer la ligne entière. Il suffit de mettre la variable d'indexation utilisée dans ng-répéter code> dans l'argument, de sorte que vous puissiez éditer une colonne de cette ligne particulière.

Pour par exemple, considérez le code de l'échantillon, P>

 <div ng-repeat="x in records">
    <button ng-click="changeQty(x)">
 </div>


2 commentaires

Puis? Que dois-je faire dans le contrôleur?


Dans le contrôleur, vous devrez trouver un élément de la liste des éléments, puis vous devez mettre à jour cet élément. Pour cela, vous devez avoir une clé unique pour identifier cet élément qui indique indirectement l'emplacement de cet élément de la liste des articles.



2
votes

Quand ng-répéter est utilisé avec le filtre, puis un index $ est différent de ce qui est attendu.

Dans votre cas, vous utilisez un filtre de recherche avec ng-répéter . Ainsi, lorsque l'élément est filtré à partir de la liste / tableau, alors $ index est également modifié en fonction de la nouvelle liste filtrée.

Vous pouvez utiliser la solution de contournement de ng-cache où la ligne sera masquée mais $ index sera maintenue ou vous pouvez passer quelque chose d'un seul objet unique ou complet à la fonction au lieu de $ index .


0 commentaires


0
votes

Vous pouvez essayer comme suit le code ci-dessous et consulter également ce PLUNKER Lien pour votre exemple de scénario de travail.

modèle: strong> p> xxx pré>

contrôleur: strong> p>

$scope.changeQty = function(item) { 
    if(item.qty>0){
        item.subTotal = parseInt(item.price*item.qty);
    }
    getTotal();
  };
  function getTotal(){
    var tot=0;
    for (var i = 0; i < $scope.itemForPOS.length; i++) {
      tot = tot + $scope.itemForPOS[i].subTotal;
    }
    $scope.totalAmount= tot;
  }


0 commentaires

0
votes

Il existe déjà de nombreuses solutions données par d'autres, alors je vais indiquer vos erreurs ici.

Comme vous l'exposez dans le tir à l'écran, vous avez un montant total pour chaque ligne, en attribuant de nombreuses quantités totales dans Une seule variable $ portée.totalamount code> va créer un problème. Identique à $ portée.presyo code>. P>

Un moyen simple de résoudre ce problème est d'attribuer toutes les variables dans leur objet de ligne respective, chaque ligne peut donc avoir son propre montant total.

ng-modèle code> pour chaque entrée doit également être lié à l'objet de ligne, donc la quantité de quantité 1 ligne ne mettrait pas à jour la quantité sur d'autres lignes. P>

Et une amélioration, vous pouvez transmettre l'article entier au lieu d'index uniquement dans l'autre fonction. P>

// instead of
$scope.passItem = function(index) {
  var itemNu = $scope.itemLoad[index].itemNo;
  var descrptn = $scope.itemLoad[index].desc;
  var cashPrice = $scope.itemLoad[index].cash;

// do this
$scope.passItem = function(item) {
  var itemNu = item.itemNo;
  var descrptn = item.desc;
  var cashPrice = item.cash;


0 commentaires

0
votes

Ceci peut être obtenu en modifiant la signature de la méthode Changeqty

de xxx

à < / p> xxx


0 commentaires

0
votes

Vous pouvez l'envoyer «IT» dans la fonction Passitem

$scope.passItem = function(item) {
var itemNu = item.itemNo;
var descrptn = item.desc;
var cashPrice = item.cash;
var qty = 1;
var totalSum = cashPrice*qty;

console.log(totalSum)
$scope.presyo = cashPrice;

$scope.itemsPOS.push({'code':itemNu, 'name':descrptn, 'price': cashPrice, 'qty': qty, 'dscnt': 0, 'subTotal': totalSum});

console.log($scope.itemsPOS)

$scope.counter = $scope.itemsPOS.length;


0 commentaires

0
votes
$scope.passItem = function(index) {
var seletectedItem = JSON.parse(JSON.stringify($scope.itemLoad[index]));
var itemNu = seletectedItem.itemNo;
var descrptn = seletectedItem.desc;
var cashPrice = seletectedItem.cash;
var qty = 1;
var totalSum = cashPrice*qty;

console.log(totalSum)
$scope.presyo = cashPrice;

$scope.itemsPOS.push({'code':itemNu, 'name':descrptn, 'price': cashPrice, 'qty': qty, 'dscnt': 0, 'subTotal': totalSum});

console.log($scope.itemsPOS)

$scope.counter = $scope.itemsPOS.length;

0 commentaires