AngularJSを使用して動的に作成されたHTMLテーブルからHTMLテーブルの列の合計を計算する方法は？

添付のコードスニペットで、AngularJSを使用しているすべての行からの正味金額の合計を計算したいとします。AngularJSを使用して動的に作成されたHTMLテーブルからHTMLテーブルの列の合計を計算する方法は？

この点についての迅速なサポートは高く評価されます。

<html ng-app="MyApp"> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
<title>Add Rows</title> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script> 
<script> 
    angular.module('MyApp', []) 
     .controller('MainController', ['$scope', '$http', 
      function ($scope, $http) { 
       $scope.rows = ['Row 1']; 
       $scope.counter = 3; 


       $scope.calculateTableSum = function (dQuantityIssued, dUnitPrice) 
       { 
        $scope.GrossTotal = dQuantityIssued * dUnitPrice; 
       } 

       //Adding Row 
       $scope.addRow = function() { 
        $scope.rows.push('Row ' + $scope.counter); 
        $scope.counter++; 

       } 

       //Removing Row 
       $scope.removeRow = function (rowIndex) { 
        $scope.rows.splice(rowIndex, 1); 
       } 

      } ]); 

</script>

<a href="#" class="button" ng-click="addRow()">Add Row {{counter}}</a> 
<table border="1"> 
    <thead> 
     <tr> 
      <th> 
       &nbsp; 
      </th> 
      <th> 
       Product 
      </th> 
      <th> 
       Description 
      </th> 
      <th> 
       Qty Issued 
      </th> 
      <th> 
       Unit Price 
      </th> 
      <th> 
       Gross Total 
      </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="(rowIndex,rowContent) in rows"> 
      <td> 
       <input type="button" value="Remove" class="btn btn-primary" ng-click="removeRow(rowIndex)" /> 
      </td>     
      <td> 
       <input type="text"></input> 
      </td> 
      <td> 
       <input type="text"></input> 
      </td> 
      <td> 
       <input ng-model="QtyIssued" type="number"/> 
      </td> 
      <td> 
       <input ng-model="UnitPrice" type="number" ng-change="calculateTableSum(QtyIssued,UnitPrice)" /> 
      </td> 
      <td> 
       <input ng-model="GrossTotal" type="number" ng-bind="QtyIssued*UnitPrice" /> 
      </td> 

     </tr> 
    </tbody> 
    <tfoot> 

    </tfoot> 
</table> 
<p> 
    Net Amount Total = {{NetAmount}} 
</p>

出典

2017-01-02 Oan Ali

私はあなたを助けることができるので、すべて一緒に1つを追加してください –

この通過してください：

<table ng-controller="SubTotalCtrl"> 
    <thead> 
     <tr><th ng-repeat="(key, th) in head">{{th}}</th></tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="row in body"> 
      <td><input ng-model="row.a"></input></td> 
      <td><input ng-model="row.b"></input></td> 
      <td><input ng-model="row.c"></input></td> 
     </tr> 
    </tbody> 
    <tfoot> 
     <tr ng-repeat="(perc, sum) in grouppedByPercentage()"> 
      <td></td> 
      <td><span>Subtotal for {{perc}}%</span></td>  
      <td>{{sum * perc/100.0}}</td> 
     </tr> 
    </tfoot> 
</table> 


angular 
.module('myApp', []) 
.controller('SubTotalCtrl', function ($scope) { 
    // data 
    $scope.head = { 
     a: "Amount", 
     b: "Percent", 
     c: "Percent" 
    }; 
    $scope.body = [{ 
     a: "1000", 
     b: "5", 
     c: "10" 
    }, { 
     a: "2000", 
     b: "0", 
     c: "5" 
    }, { 
     a: "3000", 
     b: "10", 
     c: "20" 
    }]; 

    $scope.grouppedByPercentage = function() { 
     var groups = {}; 
     $scope.body.forEach(function (row) { 
      ['b', 'c'].forEach(function (key) { 
       var perc = row[key]; 
       if (perc === '0') { return; } // ignore 0 percentage 

       if (!groups[perc]) { 
        groups[perc] = 0; 
       } 
       groups[perc] += parseInt(row.a); 
       // use `parseFloat()` if you want decimal points 
      }); 
     }); 
     return groups; 
    }; 
});

http://jsfiddle.net/ExpertSystem/LD7QS/1/

あなたのすべての質問に答えます。

出典

2017-01-02 22:08:57 Codesingh

おかげであなたの迅速な支援。あなたの答えでAngularJSオブジェクトに関する私のコンセプトをクリアし、私が探していたものを達成しました。 –

歓迎兄弟、ハッピーコーディング:) – Codesingh

AngularJSを使用して動的に作成されたHTMLテーブルからHTMLテーブルの列の合計を計算する方法は？

答えて

関連する問題