angularjs - 当对象包含 ng-repetate 时，如何使用 angularFire 保存 Firebase 对象 $asArray()

Question

我最近从 angularfire 0.6 切换到 0.8.0。我在保存包含数组本身的列表项时遇到问题。

我的对象 帐号看起来像这样:

{
  "-JQruasomekeys0nrXxH" : {
    "created" : "2014-03-23T22:00:10.176Z",
    "durations" : [ {
      "$$hashKey": "00L", // this is generated by ng-repeat on arrays
      "end" : "2014-07-15T22:00:00.000Z",
      "start" : "2014-07-09T22:00:00.000Z"
    } ],
    "email" : "some@mail.net",
  }
}

持续时间是一个包含开始和结束的时间段数组，类似于 HTML 中两个输入字段的 ng-repeat。

<tr ng-repeat="duration in account.durations">
  <td>
     <input ng-model="duration.start" datepicker>
  </td>
  <td>
     <input ng-model="duration.end" datepicker>
  </td>
</tr>

在将帐户保存到 firebase 之前，我在 Controller 中执行 angular.copy($scope.account)，以摆脱 angular $$hash 值。这在 angularfire 0.6.0 中有效。

在 angularfire 0.8.0 中，我仍然收到错误消息:

Error: Firebase.set failed: First argument contains an invalid key ($$hashKey) in property 'durations.0'. Keys must be non-empty strings and can't contain ".", "#", "$", "/", "[", or "]

在处理本身具有数组的对象时，angularfire 是如何解决这个问题的？持续时间不会是我在帐户中拥有的唯一数组。那么有没有更专业的解决方案，或者我是否必须在通过 angularfire 保存到 firebase 之前对每个数组对象进行 angular.copy？

提前感谢您的任何提示。

更新(11. 8 月 14 日)
在做了更多研究之后，问题不在于使用 angular.copy() 不再起作用。实际上确实如此。但是使用 angularfire 方法 $save() ( https://www.firebase.com/docs/web/libraries/angular/api.html#angularfire-firebaseobject-save ) 更新/修改现有数据集非常不方便，因为在执行 angular.copy() 之后我似乎找不到 $save() 项目的正确方法.

更新 2(2014 年 8 月 12 日)
我暂时找到了一种解决方法，但实际上我首先要避免的是一种解决方法:

// loop for every duration, that should clean the object from "$$hashKey" attributes
angular.forEach($scope.account.durations, function (value, index) {
  var cleanValue = {};

  // checks, if the date is a JSON string already
  if (typeof value.start === 'string') {
    cleanValue.start = value.start;
  } else {
    cleanValue.start = value.start.toJSON();
  }

  // checks, if the date is a JSON string already
  if (typeof value.end === 'string') {
    cleanValue.end = value.end;
  } else {
    cleanValue.end = value.end.toJSON();
  }

  // overwrite the array object at index to get loose of $$hashKey
  $scope.account.durations[index] = cleanValue;
});

我认为这种解决方法利用了 Firebase 中基于文档的原则的优势，因为在通过 AngularFire 存储对象之前，我必须知道对象的确切属性。

更新 3(13. 8 月 14 日)
我添加了一个 jsfiddle 来显示问题: jsfiddle.net/1fem6byt

如果将行添加到数组，然后尝试将对象保存到 firebase，则 $$hashKey 错误(如上所示)会出现在控制台中。有一些方法可以解决这个问题，但如果可能的话，我正在寻找一个更简单、更清洁的 angularfire 解决方案。我可能无法正确添加行 - 或者我错过了什么？

Answer 1

当然，在 Firebase 中解决它的最佳方法是 @Kato提到并实时绑定(bind)到数组中的数据到 View 中，您应该通过 $asArray 实例使用额外的 firebase 同步对象。

就像在这个解决方案中一样:http://jsfiddle.net/RaVbaker/sb00kor8/1/但是您将失去使用 Save to Firebase 之类的按钮“按需”保存数据的可能性。 .在 firebase 数组对象发生更改后，它们将立即保存。但它也会为您提供跨页面数据的灵 active 和同步。

但在您的情况下，其他更简单的方法是更改​​ 中对象的 Angular 跟踪唯一性的方式。 ng-重复 指示。可以通过设置 track by $index 来完成结尾 ng-repeat陈述。

更改 ng-repeat="duration in account.durations"进入这个:

 ng-repeat="duration in account.durations track by $index"

您的 jsfiddle 使用此解决方案更新: http://jsfiddle.net/RaVbaker/sb00kor8/2/

关于 track by 的更多信息对于 ngRepeat，您显然可以找到 in official documentation .

希望我有所帮助。