代码之家 › 专栏 › 技术社区 › Mohammad

Angular js应用程序函数无法计算总计

wcf-data-services angularjs c# javascript

Mohammad · 技术社区 · 7 年前

我正在试图计算两列货币输入和输出的总计以及账户余额。我定义了两个函数来计算总计,但问题是它在网页底部显示NAN,而不是显示总计。

这是角度JS代码。。

@{
    Layout = null;
}

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $http, $window) {
            $scope.IsVisible = false;
            $scope.Search = function () {
                var post = $http({
                    method: "GET",
                    url: "http://localhost:52098/HalifaxIISService.svc/TranscationDetails/" + encodeURIComponent($scope.Account_Number),
                    dataType: 'json',
                    headers: {
                        'Accept': 'application/json, text/javascript, */*; q=0.01',
                        'Content-Type': 'application/json; charset=utf-8'
                    }
                });

                post.then(function (response) { // .success(function(data => .then(function(response
                    var data = response.data; // extract data from resposne
                    $scope.Customers = JSON.parse(data); // eval(data.d) => JSON.parse(data)
                    $scope.IsVisible = true;
                }, function (err) {
                    $window.alert(err);
                });
            }

            $scope.grandTotal = function () {
                return $scope.Customers.reduce(function (previousTotal, m) {
                    return previousTotal + parseFloat(m.Deposit);
                }, 0); // Send in 0 as the default previousTotal
            }

            $scope.grandTotal1 = function () {
                return $scope.Customers.reduce(function (previousTotal, m) {
                    return previousTotal + parseFloat(m.Withdrawal);
                }, 0); // Send in 0 as the default previousTotal
            }
        });
    </script>
    @*<script type="text/javascript">
      var app = angular.module('MyApp', [])
      app.controller('MyController', function ($scope, $http, $window) {
          $scope.IsVisible = false;
          $scope.Search = function () {
              var post = $http({
                  method: "GET",
                  url: "http://localhost:52098/HalifaxIISService.svc/TranscationDetails/" + encodeURIComponent($scope.Account_Number),
                  dataType: 'json',
                  headers: {
                      'Accept': 'application/json, text/javascript, */*; q=0.01',
                      'Content-Type': 'application/json; charset=utf-8'
                  }
              });

              post.then(function (response) { // .success(function(data => .then(function(response
                  var data = response.data; // extract data from resposne
                  $scope.Customers = JSON.parse(data); // eval(data.d) => JSON.parse(data)
                  $scope.IsVisible = true;
              }, function (err) {
                  $window.alert(err);
                  });

              $scope.grandTotal = function () {
                  return $scope.Customers.reduce(function (previousTotal, m) {
                      return previousTotal + parseFloat(m.Deposit);
                  }, 0); // Send in 0 as the default previousTotal 
              }
              $scope.grandTotal1 = function () {
                  return $scope.Customers.reduce(function (previousTotal, m) {
                      return previousTotal + parseFloat(m.Withdrawal);
                  }, 0); // Send in 0 as the default previousTotal 
              }
          }
      });
    </script>*@
    <div ng-app="MyApp" ng-controller="MyController">
        Account Number:
        <input type="text" ng-model="Account_Number" />
        <input type="button" value="Submit" ng-click="Search()" />
        <hr />
        <table style="border: solid 2px Green; padding: 5px;" ng-show="IsVisible">
            @*<table cellpadding="0" cellspacing="0">*@
            <tr style="height: 30px; background-color: skyblue; color: maroon;">
                <th></th>
                <th> Account Number</th>
                 <th> Money In</th>
                <th>Date</th>
                 <th> Money Out</th>
                <th>Date</th>
                <th>Account Balance</th>

                <th></th>
                <th></th>

            </tr>
            <tbody ng-repeat="m in Customers">
                <tr style="height: 30px; background-color: skyblue; color: maroon;">
                    <td></td>
                    <td><span>{{m.Account_Number}}</span></td>
                     <td><span>{{m.Deposit| currency:"Â£"}}</span></td>
                    <td><span>{{m.Date}}</span></td>

                    <td><span>{{m.Withdrawal | currency:"Â£"}}</span></td>
                    <td><span>{{m.Date}}</span></td>
                    <td><span>{{m.Account_Balance| currency:"Â£"}}</span></td>

                </tr>


            </tbody>
            <table style="border: solid 2px Green; padding: 5px;" ng-show="IsVisible">
                <tr style="height: 30px; background-color: skyblue; color: maroon;">
                    <td>Total Money In:</td>

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

                    <td>Total Money Out:</td>

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

                    <td>Account Balance:</td>

                    <td>{{m.Account_Balance| currency:"Â£"}}</td>

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

    </div>
</body>
</html>

这是我运行应用程序时的结果。

2 回复 | 直到 7 年前

Glenn D.J. 7 年前

我猜你会 NaN 因为您正在添加至少1个 南安 总价值。你可能会得到这个 南安 当你尝试表演时 parseFloat() 在空字符串上。有两种方法可以防止出现这种情况:首先检查空字符串或检查 南安 手术后。然后仅添加非 南安 价值观

对于总收入,给出以下代码:

$scope.grandTotal = function () {
    return $scope.Customers.reduce(function (previousTotal, m) {
        var valueToAdd = parseFloat(m.Deposit);
        if (isNaN(valueToAdd))
            return previousTotal;
        return previousTotal + valueToAdd;
    }, 0); // Send in 0 as the default previousTotal
}

Sudhanshu Das 7 年前

$scope.grandTotal = function() {
  return $scope.Customers.reduce(function(previousTotal, m) {
    return previousTotal + parseFloat(m.Deposit || 0);
    // Set the default deposit to 0 if the value is either not available/null/undefined/NaN
  }, 0); // Send in 0 as the default previousTotal 
}
$scope.grandTotal1 = function() {
  return $scope.Customers.reduce(function(previousTotal, m) {
    return previousTotal + parseFloat(m.Withdrawal || 0);
        // Set the default deposit to 0 if the value is either not available/null/undefined/NaN
  }, 0); // Send in 0 as the default previousTotal 
}

如果存款或取款的任何值不可用或为null或未定义,则只需将该值设置为。