Angular js Anwendungsfunktionen konnte die Summe nicht berechnen

-1

Ich versuche, die Gesamtsumme der beiden Spalten Money In und Money Out und Kontostand zu berechnen. Ich habe zwei Funktionen definiert, um die Gesamtsumme zu berechnen, aber das Problem ist, dass NAN unten auf der Webseite angezeigt wird, anstatt die Summe anzuzeigen. HierAngular js Anwendungsfunktionen konnte die Summe nicht berechnen

ist der Winkel JS-Code ..

@{ 
    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>

Hier ist das Ergebnis, wenn ich die Anwendung auszuführen.

Quelle

2017-12-23 Mohammad

Meine Vermutung ist, dass Sie NaN bekommen, weil Sie mindestens 1 NaN Wert Ihrer Gesamt hinzufügen. Wahrscheinlich erhalten Sie diese NaN, während Sie versuchen, parseFloat() auf eine leere Zeichenfolge auszuführen. Sie haben zwei Möglichkeiten, dies zu verhindern: Überprüfen Sie entweder zuerst die leere Zeichenfolge oder suchen Sie nach der Operation nach NaN. Dann fügen Sie nur die Werte NaN hinzu.

Für das gesamte eingehende Geld dies den folgenden Code gibt:

$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 
}

Quelle

2017-12-23 15:36:50

$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 
 
}

Sie einfach den Wert einstellen kann, wenn jeder Wert nicht verfügbar ist oder null oder nicht definiert entweder einzahlen oder abheben.

Quelle

2017-12-23 20:06:21

Angular js Anwendungsfunktionen konnte die Summe nicht berechnen

Antwort

Verwandte Themen