如何獲得angularjs中列的總值？

我是新來的angularjs。如何獲得表總金額列中的總金額並在輸入文本框中顯示？我認爲這名運動員可以解決我的問題，但我現在無法訪問它。 http://plnkr.co/edit/CHBm8RCqW5RNZWrzAe5r?p=preview 如何獲得angularjs中列的總值？

這裏是我的表樣

<table> 
       <thead> 
        <tr> 

         <th>Product</th> 
         <th>Quantity</th> 
         <th>Total Amount</th> 


        </tr> 
       </thead> 
       <tbody> 
        <tr ng-repeat="payment_queue in data | filter:searchFilter"> 

         <td>{{payment_queue.product_name}}</td> 
         <td>{{payment_queue.sold_quantity}}</td> 
         <td>{{payment_queue.amount}}</td> 

        </tr> 
       </tbody> 
      </table> 

Total Amount: <input type="text value=""> <--- the total amount value goes here...

var myApp = angular.module('myApp', ['ngRoute']); 
    myApp.controller('productsalesController', ['$scope', '$http', function ($scope, $http) { 



        $scope.data=[]; 

        $http.get("../php/paymentQueuedata.php") 
         .success(function(data){ 
          $scope.data = data; 
         }) 
         .error(function() { 
          $scope.data = "error in fetching data"; 
         }); 

     }]);

PHP JSON

<?php 
    //database settings 
    $connect = mysqli_connect("localhost", "root", "", "rmsdb"); 

    $result = mysqli_query($connect, "select * from payment_queue"); 


$data = array(); 

while ($row = mysqli_fetch_array($result)) { 
    $data[] = $row; 
} 
    print json_encode($data); 
?>

來源

2015-12-29 Jayrex

您需要在您的控制器中計算它並將其分配給'$ scope'變量。然後你可以使用'>'。角度並不便宜。 – mostruash

[計算AngularJS ng-repeat中重複元素的總和]的可能副本（http://stackoverflow.com/questions/22731145/calculating-sum-of-repeated-elements-in-angularjs-ng-repeat） – marapet

請分享你的樣品json –

我解決我的問題..

在我的控制器

$scope.totalAmount = function(){ 
      var total = 0; 
      for(count=0;count<$scope.data.length;count++){ 
       total += parseInt($scope.data[count].total_amount,10); 
      } 
      return total; 
     };

在HTML

<table> 
       <thead> 
        <tr> 

         <th>Product</th> 
         <th>Quantity</th> 
         <th>Total Amount</th> 


        </tr> 
       </thead> 
       <tbody> 
        <tr ng-repeat="payment_queue in data | filter:searchFilter"> 

         <td>{{payment_queue.product_name}}</td> 
         <td>{{payment_queue.sold_quantity}}</td> 
         <td>{{payment_queue.amount}}</td> 

        </tr> 
       </tbody> 
      </table> 

Total Amount: <input type="text value="{{ totalAmount() }}"> <--- the total amount value goes here...

來源

2015-12-29 14:05:32 Jayrex

total_amount。你能解釋一下這個變量嗎？ – Mohammad

你可以這樣做。這對您的問題是很好的解決方案。

的index.html

<!DOCTYPE html> 
<html ng-app="plunker"> 

<head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <link data-require="[email protected]*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> 
    <script> 
     document.write('<base href="' + document.location + '" />'); 
    </script> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.2.22/angular.js" data-semver="1.2.22"></script> 
    <script src="app.js"></script> 
</head> 

<body ng-controller="MainCtrl"> 
    <table class="table table-striped"> 
     <tbody> 
      <tr ng-repeat="item in items"> 
       <td>{{item.name}}</td> 
       <td>{{item.years}}</td> 
       <td>{{item.amount}}</td> 
       <td>{{item.interest}}%</td> 
      </tr> 
      <tr> 
       <td>Total:</td> 
       <td>{{getTotal('years')}}</td> 
       <td>{{getTotal('amount')}}</td> 
       <td>{{getTotal('interest')}}</td> 
      </tr> 
     </tbody> 
    </table> 
</body> 

</html>

app.js

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 

$scope.items = [ 
    {name: 'xxx', amount: 13, years: 3, interest: 2},  
    {name: 'yyy', amount: 23, years: 4, interest: 3}, 
    {name: 'zzz', amount: 123, years: 4, interest: 4} 
]; 

$scope.getTotal = function(int) { 
    var total = 0; 
    angular.forEach($scope.items, function(el) { 
     total += el[int]; 
    }); 
    return total; 
}; 
});

你也可以使用這個網址。謝謝！！！ http://plnkr.co/edit/CHBm8RCqW5RNZWrzAe5r?p=preview

來源

2016-09-08 07:38:41 moni123

有一種方法可以在不使用函數的情況下獲得總計。

只需使用ng-init。如果您需要允許列表更改或被過濾，請使用ng-repeat來強制重新計算總計。

<table class="table table-bordered table-hover"> 
    <thead> 
    <tr> 
     <th>Product</th> 
     <th>Quantity</th> 
     <th>Price</th> 
     <th>Ext</th> 
    </tr> 
    </thead> 
    <tbody ng-repeat="_ in [ [ search, products ] ]" ng-init="total = 0"> 
    <tr ng-repeat="product in products | filter: search"> 
     <td>{{ product.name }}</td> 
     <td>{{ product.quantity }}</td> 
     <td>{{ product.price }}</td> 
     <td ng-init="$parent.total = $parent.total + (product.price * product.quantity)">${{ product.price * product.quantity }}</td> 
    </tr> 
    <tr> 
     <td><b>Total</b></td> 
     <td></td> 
     <td></td> 
     <td><b>${{ total }}</b></td> 
    </tr> 
    </tbody> 
</table>

查看http://plnkr.co/edit/dLSntiy8EyahZ0upDpgy?p=preview查看工作示例。

來源

2017-02-21 04:00:37

如何獲得angularjs中列的總值？

回答

相關問題