Une autre question après AngularFire 0.5.0 mise à jour - calcul renvoie NaN

Question

Je suis de plus en plus déçu de la angularFire 0.5.0, parce que rien ne fonctionne plus correctement.Après j'ai été en mesure de résoudre les supprimer d'un seul élément avec l'aide de vous, j'ai couru dans une autre question.

Chaque élément se compose d'une date, la description et le prix.Avant j'ai mis à jour, j'ai été en mesure de calculer la somme de tous les prix et retourner sur la page.Maintenant, il dit NaN ou Null.J'ai déjà été à essayer de comprendre pourquoi, mais les deux valeurs (gagner.prix, $champ d'application.totalEarning) dans le calcul sont les chiffres.Je n'ai pas l'obtenir.La nouvelle angulaire feu ne rien faire?J'essaie de résoudre depuis un certain temps et ne peut pas juste.Je serais vraiment, si quelqu'un pouvait le comprendre.Probablement que je suis tout simplement pas à le voir et c'est une stupide question.

Voir sur plunkr: http://embed.plnkr.co/jb1iWOcjcm0alFchmzOH/preview

Voici le code:

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

Et le code 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

Mise À Jour De Réponse

Il y a plusieurs choses que vous faites mal.Comme indiqué dans ma réponse originale à cette question, vous devez effectuer une itération sur les touches de Firebase, pas la firebase objet lui-même.En outre, vous devez vous assurer que toutes les mises à jour se produisent après Firebase a mis à jour (via un $on('change', ...) gestionnaire d'événements) et à l'intérieur de la AngularJS du cycle de vie (accompli ci-dessous à l'aide de $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);
});

Réponse Originale À Cette Question

C'est parce que angular.forEach est une itération sur toutes les propriétés de la $scope.earnings objet (qui est un Firebase objet).Ce que vous voulez faire est de faire une itération sur les éléments individuels.

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