Javascript Angular JS应用程序无法计算正确的总计_Javascript_Angularjs

Javascript Angular JS应用程序无法计算正确的总计

javascript angularjs

Javascript Angular JS应用程序无法计算正确的总计,javascript,angularjs,Javascript,Angularjs,我正在将Wcf服务消费到Angular JS应用程序中。我试图在最下面一行对总计进行分级。我想添加每一行的值，并且我想添加的列名称是Amount，如屏幕截图所示。当我运行应用程序时，它没有计算正确的总数下面是脚本代码 var app = angular.module("WebClientModule", []) .controller('Web_Client_Controller', ["$scope", 'myService', function ($scope, myServic

我正在将Wcf服务消费到Angular JS应用程序中。我试图在最下面一行对总计进行分级。我想添加每一行的值，并且我想添加的列名称是Amount，如屏幕截图所示。当我运行应用程序时，它没有计算正确的总数

下面是脚本代码

var app = angular.module("WebClientModule", [])

    .controller('Web_Client_Controller', ["$scope", 'myService', function ($scope, myService) {

        $scope.OperType = 1;
        $scope.Account_Number = "";
        $scope.Account_Holder_Name = "";
        $scope.Amount = "";
        $scope.Sort_Code = "";
        $scope.Transcation_Type = "";
        $scope.Date = "";

        GetAllRecords();
        //To Get All Records  
        function GetAllRecords() {
            var promiseGet = myService.getAllStudent();
            promiseGet.then(function (pl) { $scope.Users = pl.data },
                function (errorPl) {
                    $log.error('Some Error in Getting Records.', errorPl);
                });
        }
        $scope.grandTotal = function () {
            return $scope.Users.reduce(function (ac, cr) {
                return ac.Amount + cr.Amount;
            });
        }


    }]);



app.service("myService", function ($http) {

    this.getAllStudent = function () {
        return $http.get("http://localhost:52098/HalifaxIISService.svc/GetCreateCurrentAccountDepositList");
    }
})

这是HTML代码

@{
    Layout = null;
}

<!DOCTYPE html>

<html data-ng-app="WebClientModule">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>TotalDeposit</title>
    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/RegistrationScript/DepositTotal.js"></script>

</head>
<body>
    <table  ng-init="items.total = {}" id="tblContainer" data-ng-controller="Web_Client_Controller">
        <tr>
            <td>
                <table style="border: solid 2px Green; padding: 5px;">
                    <tr style="height: 30px; background-color: skyblue; color: maroon;">
                        <th></th>
                        <th>Account Number</th>
                        <th>Account Holder Name</th>

                        <th>Amount</th>
                        <th>Sort Code</th>
                        <th>Transcation Type</th>
                        <th>Date</th>

                        <th></th>
                        <th></th>
                    </tr>
                    <tbody data-ng-repeat="user in Users">
                        <tr>
                            <td></td>
                            <td><span>{{user.Account_Number}}</span></td>
                            <td><span>{{user.Account_Holder_Name}}</span></td>
                            <td><span>{{user.Amount}}</span></td>

                            <td><span>{{user.Sort_Code}}</span></td>

                            <td><span>{{user.Transcation_Type}}</span></td>
                            <td><span>{{user.Date}}</span></td>

                        </tr>
                    </tbody>
                    <tr>
                        <td>Total:</td>

                        <td>{{grandTotal()}}</td>

                    </tr>
                </table>
            </td>
        </tr>



    </table>
</body>
</html>

@{
布局=空；
}
总存款
帐号
帐户持有人姓名
数量
排序代码
转换类型
日期
{{user.Account{u Number}
{{user.Account\u Holder\u Name}
{{user.Amount}}
{{user.Sort_Code}
{{user.transaction_Type}
{{user.Date}
总数：
{{grandTotal（）}}

这是我运行应用程序时的屏幕截图

一个问题可能是

$scope.Users

在

myService.getAllStudent（）

解决之前是未定义的。因此，您试图在

未定义的上调用.reduce
。解决此问题的一种方法是返回“加载”或类似内容，直到设置了$scope.Users
：
$scope.grandTotal = function () {
  if(!$scope.Users) {
    return 'loading';
  }

  return $scope.Users.reduce(function (ac, cr) {
    return ac.Amount + cr.Amount;
  });
}

一个问题可能是，$scope.Users
在myService.getAllStudent（）
解决之前是未定义的。因此，您试图在未定义的上调用.reduce
。解决此问题的一种方法是返回“加载”或类似内容，直到设置了$scope.Users
：
$scope.grandTotal = function () {
  if(!$scope.Users) {
    return 'loading';
  }

  return $scope.Users.reduce(function (ac, cr) {
    return ac.Amount + cr.Amount;
  });
}

$scope.Users.Amount
是一种字符串类型，因此您要进行字符串连接而不是添加。在将这些值相加之前，请将它们转换为数字parseFloat（）
是您需要的
另外，在reduce函数中，由于您处理的是对象，并且需要一个数值，因此需要以0值作为种子。第一次调用函数时，将不定义ac
。我已经更新了reduce（）
函数中的变量名，以清楚地显示作为参数传入的内容
    $scope.grandTotal = function () {
        return $scope.Users.reduce(function (previousTotal, user) {
            return previousTotal + parseFloat(user.Amount);
        }, 0); // Send in 0 as the default previousTotal
    }

$scope.Users.Amount
是一种字符串类型，因此您要进行字符串连接而不是添加。在将这些值相加之前，请将它们转换为数字parseFloat（）
是您需要的
另外，在reduce函数中，由于您处理的是对象，并且需要一个数值，因此需要以0值作为种子。第一次调用函数时，将不定义ac
。我已经更新了reduce（）
函数中的变量名，以清楚地显示作为参数传入的内容
    $scope.grandTotal = function () {
        return $scope.Users.reduce(function (previousTotal, user) {
            return previousTotal + parseFloat(user.Amount);
        }, 0); // Send in 0 as the default previousTotal
    }

$scope.Users.Amount的数据类型是什么？它是一个字符串
还是一个数字
？金额是字符串，因为您正在进行字符串连接而不是加法。您需要将字符串转换为数字。在wcf或angula js中的何处？在Angular中。我更新了我的答案以显示我所说的内容。$scope.Users.Amount的数据类型是什么？它是一个字符串
还是一个数字
？金额是字符串，因为您正在进行字符串连接而不是加法。您需要将字符串转换为数字。在wcf或angula js中的何处？在Angular中。我更新了我的答案以显示我在说什么。对不起，相同的结果或者相同的结果您应该将金额保留为数字，而不是将其转换为字符串。但是您的reduce（）
函数仍然需要更新才能保持ac
的状态。而您的reduce（）
函数已经更新以反映我的更改？我用一个演示reduce（）的片段更新了我的答案
function.Let.us.复制并粘贴到您的文件中，以覆盖当前的$scope.grandTotal代码，并告诉我它是否有效：$scope.grandTotal=function（）{return$scope.Users.reduce（function（previousTotal，user）{return previousTotal+parseFloat（user.Amount）；}，0）；//将0作为默认值发送到previousTotal}
您应该将金额保留为一个数字，而不是将其转换为字符串。但是您的reduce（）
函数仍然需要更新才能保持ac
的状态。而您的reduce（）
函数已经更新以反映我的更改？我用一个演示reduce（）的片段更新了我的答案
function.Let.us.复制并粘贴到您的文件中，以覆盖当前的$scope.grandTotal代码，并告诉我它是否有效：$scope.grandTotal=function（）{return$scope.Users.reduce（function（previousTotal，user）{return previousTotal+parseFloat（user.Amount）；}，0）；//将0作为默认的previousTotal发送}