Javascript 获取ng内的总和值,重复使用角度js

Javascript 获取ng内的总和值,重复使用角度js,javascript,html,angularjs,Javascript,Html,Angularjs,我使用ng repeat来重复json数组。我使用dayDiff()函数计算了夜晚。现在我想拿到所有的发票。我正在使用angularjs 如何获取所有发票的总住宿 <table class="table" ng-show="filteredItems > 0"> <tr> <td>No</td> <td>Invoice No</td> <td>Name

我使用ng repeat来重复json数组。我使用dayDiff()函数计算了夜晚。现在我想拿到所有的发票。我正在使用angularjs

如何获取所有发票的总住宿

<table class="table" ng-show="filteredItems > 0">
    <tr>
        <td>No</td>
        <td>Invoice No</td>
        <td>Name</td>
        <td>Eamil</td>
        <td>Room Name</td>
        <td>Check In Date</td>
        <td>Check Out Date</td>
        <td>No. Room</td>
        <td>Night(s)</td>
        <td>Booking Date</td>
        <td>Amount</td>
    </tr>
    <tr ng-repeat="data in filtered = (list | filter:search ) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
        <td>{{$index+1}}</td>
        <td>{{data.invoicenumber}}</td>
        <td>{{data.firtname}}{{data.lastname}}</td>
        <td>{{data.email}}</td>
        <td>{{data.roomname}}</td>
        <td ng-model='fromDate'>{{data.cidt}}</td>
        <td ng-model='toDate'>{{data.codt}}</td>
        <td>{{data.qty}}</td>
        <td ng-model='night'>{{dayDiff(data.cidt,data.codt)}}</td>
        <td>{{data.bdt}}</td>
        <td>{{data.btotal}}</td>
    </tr>
</table>

不
发票号
名称
埃米尔
房间名称
登记日期
退房日期
不,房间
晚上(s)
预订日期
数量
{{$index+1}}
{{data.invoicenumber}
{{data.firtname}{{data.lastname}}
{{data.email}
{{data.roomname}
{{data.cidt}
{{data.codt}
{{data.qty}
{{dayDiff(data.cidt,data.codt)}
{{data.bdt}
{{data.btotal}

首先需要添加一行。这一额外的行将如下所示:

<tr>
    <td colspan="11">Total nights: {{calcTotal(filtered)}}</td>
</tr>

总夜数:{{calcTotal(过滤)}
然后在控制器中,您需要添加一个函数来计算夜晚,如

$scope.calcTotal = function(filtered){
     var sum = 0;
     for(var i = 0 ; i<filtered.length ; i++){
        sum = sum + filtered[i].nights;
     }
     return sum;
};
$scope.calcTotal=函数(已过滤){
var总和=0;

对于(var i=0;i您可以首先使用JSON模型的工厂来存储计算的夜间:

// We inject the dayDiff function via the dayDiffService service
angular.factory('invoice', ['dayDiffService', function(dayDiffService) {
    var Invoice = function(data) {
        // merge json properties to self
        angular.merge(this, data);
        // we compute the night(s)
        this.nights = dayDiffService.dayDiff(data.cidt, data.codt);
    }
    return Invoice;
}]);
然后,在控制器中,添加一个函数,从过滤列表中总结夜晚:

angular.controller('invoicesCtrl', ['$scope', 'invoice', function($scope, Invoice) {
    $scope.list = [];

    // let's say that JSON holds your json model from http's response
    $scope.list = JSON.map(function() { 
        return new Invoice(i) 
    });

    $scope.sumNights = function(filtered) {
        filtered.reduce(function(sum, invoice) {
            sum += invoice.nights;
            sum
        }, 0);
    }
}]);
然后,在html中添加新行以显示计算结果:

<div ng-controller="invoicesCtrl as vm">
    <table>
        ...
        <tbody>
            <tr ng-repeat="data in filtered = (vm.list | filter:search ) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
                <td>{{$index+1}}</td>
                ...
                <tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="8"></td
                <td>{{vm.sumNights(filtered)}}</td
                <td colspan="2"></td
            </tr>
        </tfoot>
    </table>
</div>

...
{{$index+1}}
...

您可以为您的Json模型创建一个工厂,该工厂将具有夜间计算属性。然后,您可以创建一个函数,将筛选后的数组作为参数,该函数将输出所有夜间的总和。请提供JSFIDDLE。还请注意,您的ng show可以通过ng show=“filtered.length>0”简化