AngularFire 0.5.0更新プログラムの後の別の問題 - 計算はNAN

Question

AngularFire 0.5.0にもっとがっかりしています。私があなたの助けを借りて単一のアイテムを削除することができた後、私は別の問題に遭遇しました。

各単一項目は日付、説明、価格で構成されています。更新する前に、私はすべての価格の合計を計算してページにそれを返すことができました。今、それはちょうどNaNまたはNULLと言います。私はすでにその理由を理解しようとしていましたが、計算内の両方の値（earning.price、$ scope.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>

.

Answer 1

更新された回答

あなたが間違ってやっていることがいくつかあります。私の元の答えに記載されているように、Firebaseオブジェクト自体ではなく、FireBaseからキーを繰り返す必要があります。さらに、Firebaseが（$on('change', ...)イベントハンドラを介して）更新後、およびAngularJSライフサイクル（以下の一般的な$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オブジェクト（これはFirebaseオブジェクト）のすべてのプロパティに繰り返されているためです。あなたがやりたいことは個々のアイテムを繰り返すことです。

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

.