0
Money InとMoney Outの2つの列の総計を計算しようとしています。私は合計を計算する2つの関数を定義しましたが、Webページの下部に合計を表示する代わりにNANを表示しているという問題があります。私はここ Angular JSが行の総計を表示できません
角度の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>
私はそれを知っているが、それはあなたの問題とは無関係です。あなたのURLはパブリックサイトではなく、ここからアクセスできないので、私は単純にいくつかのデータを嘲笑しました。 – jbrown
コードスニペットを実行して合計が機能していることを確認しましたか？ – jbrown
模擬データを使った作業スニペットに加えて、コードの外観を表示するために私の答えを変更しました – jbrown