Un altro problema dopo l'aggiornamento di AngularFire 0.5.0 - Calcolo restituisce Nan

Question

Sono sempre più deluso dall'AngularFire 0.5.0, perché nulla funziona più correttamente.Dopo essere stato in grado di risolvere la rimozione di un singolo oggetto con l'aiuto di te, ho corso in un altro problema.

Ogni singolo elemento è costituito da una data, una descrizione e un prezzo.Prima che ho aggiornato, sono stato in grado di calcolare il totale di tutti i prezzi e restituirlo sulla pagina.Ora dice solo nan o null.Stavo già cercando di capire perché, ma entrambi i valori (guadagni.price, $ scope.totalearning) nel calcolo sono numeri.Non capisco.Il nuovo fuoco angolare fa qualcosa?Sto cercando di risolverlo da un po 'e non posso semplicemente.Sarei davvero, se qualcuno potesse capirlo.Probabilmente non lo vedrò ed è un problema piuttosto stupido.

Vedi su Plunkr: http://embed.plnkr.co/jb1iwocjcm0alfchmzoh/preview

Ecco il codice:

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

.

e l'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

risposta aggiornata

Ci sono diverse cose che stai facendo in modo errato.Come indicato nella mia risposta originale, è necessario iterare sopra i tasti da Firebase, non l'oggetto di Firebase stesso.Inoltre, è necessario assicurarsi che tutti gli aggiornamenti avvengano dopo che FireBase ha aggiornato (tramite un gestore di eventi $on('change', ...)) e all'interno del ciclo di vita angolare (realizzato sotto utilizzando $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);
});

.

Risposta originale

Questo perché angular.forEach è intestante su tutte le proprietà dell'oggetto $scope.earnings (che è un oggetto Firebase).Quello che vuoi fare è iterare sui singoli oggetti.

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

.