angularjs - 如何在angularjs中获取列中的总值？

Question

我是 angularjs 的新手。如何获取表格总金额列中的总金额并显示在输入文本框中？我认为这个 plunker 可以解决我的问题，但我现在无法访问它。 http://plnkr.co/edit/CHBm8RCqW5RNZWrzAe5r?p=preview

这是我的表格示例

<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...

js

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);
?>

Answer 1

有一种方法可以在不使用函数的情况下获得总数。

只需使用 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一个工作示例。