如何在 Firebase 中为数组中的项追加新值

在Firebase中，我有一个'想法'列表。如果用户按下与该想法关联的按钮，我希望在名为"newValue"的属性下将一个值附加到该想法。

例如，下面的html使用ng-repeat来显示想法数组，并创建一个名为"追加值"的关联按钮。我希望每次用户按"追加值"时，都会将一个新值附加到名为"newValue"的想法属性中。

<body ng-controller="ctrl">
  <table>
  <tr class="item" ng-repeat="(id,item) in ideas">
    <td>{{item.idea}}</td>
    <td><input ng-model="newValue"></td>
    <td><button ng-click="ValueAppend(id,newValue)">Append Value</button></td>
    </tr>
  </table>
</body>

下面是我创建此函数的尝试。

var app = angular.module("app", ["firebase"]);
app.factory("Ideas", ["$firebase", function($firebase) {
  var Ref = new Firebase('https://crowdfluttr.firebaseio.com/');
  var childRef = Ref.child('ideas');
  return $firebase(childRef).$asArray();
}]);
app.controller("ctrl", ["$scope","Ideas", function($scope,Ideas) {
  $scope.ideas = Ideas;
  $scope.idea = "";
  $scope.ValueAppend = function (id,newValue) {   
    var URL = "https://crowdfluttr.firebaseio.com/ideas/" + id + "newValue";
    var IdeaRef = new Firebase(URL);
    var IdeaData = $firebase(IdeaRef);
    $scope.IdeaAttributes = IdeaData.$asArray();
    $scope.IdeaAttributes.$add({
        newValue: newValue,
        timestamp: Date.now()
      });
  };
}]);

请参阅我的代码笔以获取我的工作示例：http://codepen.io/chriscruz/pen/PwZWKG

更多注意事项：我知道 AngularFire 提供了 $add(( 和 $save(( 来修改这个数组，但我如何使用这些方法，以便我可以在数组中的项目下添加新的"字符串"。

我不确定这些是否是你的问题，但它们是上面代码和代码笔中错误的两个错别字：错别字和概念。

错别字

您忘记将$firebase注入控制器，这会导致：

"引用错误：未定义$firebase">

解决方案当然很简单：

app.controller("ctrl", ["$scope","Ideas", "$firebase",  function($scope,Ideas,$firebase) {

此外，您似乎在newValue之前缺少斜杠，这意味着您正在尝试创建一个新想法，而不是将值添加到现有想法中。解决方案再次简单，在newIdea之前添加一个斜杠，如下所示：

    var URL = "https://crowdfluttr.firebaseio.com/ideas/" + id + "/newValue";

如果您发现自己更频繁地犯这个错误，那么通过child功能，您可能会成为更好的服务器。虽然它通常有更多的代码，但它不太适合这种错别字。创建对newValue节点的引用变为：

    var URL = "https://crowdfluttr.firebaseio.com/ideas/";
    var IdeaRef = new Firebase(URL).child(id).child("newValue");

概念

除去这些琐碎的错别字，我们可以专注于真正的问题：如果您控制台.log您生成的 URL，最容易看到哪个问题：

https://crowdfluttr.firebaseio.com/ideas/0/newValue

但是，如果您在Firebase forge中查找相同的数据(通过在浏览器中转到 https://crowdfluttr.firebaseio.com/ideas/(，您将看到正确的URL是：

https://crowdfluttr.firebaseio.com/ideas/-JbSSmv_rJufUKukdZ5c/newValue

你使用的"0"来自id，它是AngularJS数组中思想的索引。但这并不是Firebase用于这个想法的key。当 AngularFire 加载您的数据时$asArray它会将 Firebase 键映射到 Angular 索引。我们需要执行反向操作将新值写入想法：我们需要将数组索引(以 id 为单位(映射回 Firebase 键。为此，您可以致电[$keyAt(id)][1].由于您将想法数组保留在 Ideas 中，它很简单：

    var URL = "https://crowdfluttr.firebaseio.com/ideas/";
    var IdeaRef = new Firebase(URL).child(Ideas.$keyAt(id)).child("newValue");

因此，控制器现在变为：

app.controller("ctrl", ["$scope","Ideas", function($scope,Ideas) {
  $scope.ideas = Ideas;
  $scope.idea = "";
  $scope.ValueAppend = function (id,newValue) {   
    var URL = "https://crowdfluttr.firebaseio.com/ideas/";
    var IdeaRef = new Firebase(URL).child(Ideas.$keyAt(id)).child("newValue");
    var IdeaData = $firebase(IdeaRef);
    $scope.IdeaAttributes = IdeaData.$asArray();
    $scope.IdeaAttributes.$add({
        newValue: newValue,
        timestamp: Date.now()
      });
  };
}]);

我很快在你的代码笔中旋转了一下，这似乎有效。

错别字

概念

相关内容

最新更新

热门标签：