javascript - AngularJS：页面显示 NaN 并在从服务器获取数据时显示数据。如何预防？

Question

考虑这个控制器

  $scope.transaction = {};
  $scope.transactions = Transaction.query();

  $scope.save = function() {
    var transaction = new Transaction();
    transaction.name = $scope.transaction['name'];
    transaction.debit = $scope.transaction['debit'];
    transaction.date = $scope.transaction['date'];
    transaction.amount = $scope.transaction['amount'];
    transaction.category = $scope.transaction['category'].uuid;

    //noinspection JSUnresolvedFunction
    transaction.$save();
    $scope.transactions.push(transaction);
    console.log('transaction saved successfully', transaction);
  };

和这个HTML

<tbody ng-repeat="transaction in transactions | orderBy: transaction.created_on">
      <td>{{ transaction.name }}</td>
      <td>{{ transaction.amount | currency }}</td>
      <!-- custom filter to display type of transaction -->
      <td>{{ transaction.debit | transactionType }}</td>
      <!-- added dateInMillis to pass to date to filter Angular way -->
      <td>{{ transaction.created_on | dateInMillis | date: 'medium'}}</td>
      <td>{{ transaction.category.name }}</td>
      <td>
</tbody>

问题
当我添加事务时，它立即显示一堆，NaNs然后一旦服务器返回保存的数据，它就会NaNs用实际数据替换那些

我怎样才能防止这种情况发生？它不是一个好UX

Answer 1

如果没有看到与Transaction对象相关的所有代码，就很难确定问题可能是什么。乍一看，我认为您需要一个附加到transaction.$save()方法的回调函数。

transaction.$save(function(u, putResponseHeaders) {
    // This is $save's success callback
    $scope.transactions.push(transaction);
    console.log('transaction saved successfully', transaction);
});