Otro problema después de AngularFire 0.5.0 actualización - cálculo devuelve NaN

Question

Estoy más y más decepcionado con el angularFire 0.5.0, porque nada funciona correctamente más.Después de que yo era capaz de solucionar el quitar de un solo elemento con la ayuda de ustedes, me encontré con otro problema.

Cada elemento consta de una fecha, descripción y precio.Antes he actualizado, yo era capaz de calcular el total de todos los precios y devolverlo en la página.Ahora sólo dice NaN o Nulo.Yo ya estaba tratando de averiguar por qué, pero ambos valores (los que ganan.precio, $scope.totalEarning) en el cálculo de los números.No lo entiendo.¿El nuevo angular de bomberos de hacer nada?Estoy tratando de solucionarlo desde hace un tiempo y simplemente no se puede.Yo estaría realmente, si alguien pudiera averiguar.Probablemente sólo estoy viendo y es bastante tonto problema.

Ver en plunkr: http://embed.plnkr.co/jb1iWOcjcm0alFchmzOH/preview

Aquí está el código:

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

Y el 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>

Answer 1

Respuesta Actualizada

Hay varias cosas que se están haciendo de forma incorrecta.Como dije en mi respuesta original, usted necesita para iterar a través de las teclas de Firebase, no la base avanzada objeto en sí mismo.Además, usted necesita para asegurarse de que todas las actualizaciones de suceder después de Firebase ha actualizado (a través de un $on('change', ...) controlador de eventos) y dentro de la AngularJS ciclo de vida (cumplido a continuación, utilizando $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);
});

Respuesta Original

Esto es debido a que angular.forEach es iterar sobre todas las propiedades de la $scope.earnings objeto (que es una base avanzada de objetos).Lo que quiero hacer es iterar sobre los elementos individuales.

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