2017-12-23 14 views
-1

두 개의 Money Money와 Money Out 및 계정 잔액의 총계를 계산하려고합니다. 총계를 계산하는 두 가지 함수를 정의했지만 문제는 총계를 표시하는 대신 웹 페이지 하단에 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> 

이 결과 .. 각도 JS 코드이다. 여기 enter image description here

답변

2

내 생각 엔 당신이 당신의 총에 적어도 1 NaN 값을 추가되기 때문에 당신이 NaN을 받고 있다는 점이다. 빈 문자열에 parseFloat()을 (를) 수행하려고하면이 문자가 NaN이됩니다. 이를 방지하려면 두 가지 옵션이 있습니다. 먼저 빈 문자열을 확인하거나 작업 후 NaN을 확인하십시오. 그런 다음 값이 아닌 NaN 만 추가하십시오. 당신은 단순히 어떤 값이 가능하거나 null 또는 중 하나에 대한 정의가 아닌 경우에 값을 설정할 수 있습니다

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

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

:이 다음 코드를 제공하는 총 들어오는 돈

예금 또는 인출.