또 다른 문제 후 AngularFire0.5.0 업데이트 계산 반환 NaN
-
22-12-2019 - |
문제
나는 더 많은 실망 angularFire0.5.0 기 때문에 아무것도 올바르게 작동합니다 더 이상.후에는 내가 해결할 수 있을 제거하의 단일 항목의 도움으로 당신은,실행으로 또 다른 문제입니다.
각 단일 항목으로 구성됩일,설명 및 가격입니다.기 전에 업데이트할 수 있었을 계산하의 총 가격으로 돌아와 그 페이지에.지금 그것을 말한다 할머니 또는 Null 입니다.내가 이미 이유를 알아 내기 위해 노력하고있지만,모두 값(수 있습니다.가격,$범위가 있습니다.totalEarning)계산에는 숫자입니다.나는 그것을 얻을하지 않습니다.는 새로운 각도 불 아무것도 할?나는 그것을 해결하기 위해 노력하고 이후 잠시 동안은 할 수 없습니다.나는 것이 정말로,만약 사용할 수 있는지 알아낼 것입니다.아마 난 단지 그것을 보고 그것은 매우 바보 같 문제입니다.
에서 볼 plunkr: http://embed.plnkr.co/jb1iWOcjcm0alFchmzOH/preview
는 코드는 다음과 같습니다:
$scope.addEarning = function() {
$scope.earnings.$add({date:$scope.FormEarningDate, description:$scope.FormEarningDescription, price:$scope.FormEarningPrice});
$scope.FormEarningDate = '';
$scope.FormEarningDescription = '';
$scope.FormEarningPrice = '';
$scope.updateEarning();
}
$scope.updateEarning = function() {
$scope.totalEarning = 0;
angular.forEach($scope.earnings, function (earning) {
price = parseFloat(earning.price)
$scope.totalEarning += price;
$log.log(typeof $scope.totalEarning);
})
$scope.totalBalance = $scope.totalEarning - $scope.totalCost;
}
과 html:
<form for="Profit" class="form-inline" style="margin-bottom: 20px" ng-submit="addEarning()">
<div class="form-group">
<div class="col-sm-3">
<input type="date" name="idate" ng-model="FormEarningDate" class="form-control" id="idate" placeholder="Date">
</div>
<div class="col-sm-5">
<input type="text" name="idesc" ng-model="FormEarningDescription" required class="form-control" id="idesc" placeholder="Description">
</div>
<div class="col-sm-2">
<input type="text" name="iprice" ng-model="FormEarningPrice" required class="form-control" id="iprice" placeholder="Amount">
</div>
</div>
<tr ng-repeat="earning in earnings | orderByPriority | orderBy : 'date'">
<td>{{earning.date}}</td>
<td>{{earning.description}}</td>
<td>{{earning.price}} €</td>
<td><button class="btn btn-danger" ng-click="earnings.$remove(earning.$id)">Löschen</button></td>
</tr>
<tr>
<td colspan="2"></td>
<td><strong>Total:</strong> {{totalEarning}} €</td>
<td></td>
</tr>
해결책
업데이트 답
거기에 몇 가지 일을 하고 있습니다.에 명시된 바와 같이 원래답,당신은 필요한 반복 작업에서 키를 중포 기지 않 중포 기지 개체.또한,당신은 필요한 모든 업데이트 발생 후에는 중포 기지가 업데이트(통합 $on('change', ...)
이벤트 처리기)이내에련 라이프사이클(수행를 사용하여 아래 $timeout
).
var app = angular.module('balance', ['firebase']);
app.controller('BalanceCtrl', function($scope, $log, $http, $timeout, $firebase) {
$scope.earnings = $firebase(new Firebase('https://dgdemo.firebaseio.com/Earnings'));
$scope.totalBalance = 'Nothing yet.';
$scope.totalEarning = 0;
$scope.totalCost = 0;
$scope.updateEarning = function() {
$scope.totalEarning = 0;
angular.forEach($scope.earnings.$getIndex(), function (id) {
var earning = $scope.earnings[id];
$scope.totalEarning += parseFloat(earning.price);
});
$scope.totalBalance = $scope.totalEarning - $scope.totalCost;
};
// Ensure any call to updateCallback will execute within the AngularJS lifecycle.
var updateCallback = angular.bind(null, $timeout, $scope.updateEarning);
$scope.addEarning = function() {
var earning = $scope.earnings.$add({
date: $scope.FormEarningDate,
description: $scope.FormEarningDescription,
price: $scope.FormEarningPrice
});
$scope.FormEarningDate = '';
$scope.FormEarningDescription = '';
$scope.FormEarningPrice = '';
};
$scope.earnings.$on('change', updateCallback);
});
원본 응답
이 때문입니다 angular.forEach
은 반복의 모든 속성 $scope.earnings
체(는 중포 기지 object).당신이 원하는 무엇이 반복됩니다.
$scope.updateEarning = function() {
$scope.totalEarning = 0;
angular.forEach($scope.earnings.$getIndex(), function (id) {
var earning = $scope.earnings[id];
$scope.totalEarning += parseFloat(earning.price);
});
$scope.totalBalance = $scope.totalEarning - $scope.totalCost;
}