Question

在Firebase中，我列出了一些想法。＆＃39;如果用户按下与该想法相关联的按钮，我希望在名为＆＃39; newValue的属性下将值附加到该想法。＆＃39;

例如，下面的html使用ng-repeat来显示各种想法，并创建一个名为“附加值”的关联按钮。我希望将一个新值附加到名为＆＃39; newValue＆＃39;的想法属性中。每次用户按下“追加价值”。＆＃39;

<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()
      });
  };

}]);

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

更多备注：我知道AngularFire提供$ add（）和$ save（）来修改这个数组，但我怎么能使用这些方法以便我可以添加一个新的＆＃39;字符串＆＃39;在数组中的项目下。

Answer 1

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

错别字

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

＆＃34; ReferenceError：$ firebase未定义＆＃34;

解决方案当然是：

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");

概念

有了那些微不足道的错别字，我们就可以专注于真正的问题：如果你在console.log中生成的URL，这是最容易看到的：

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

但是，如果您在Firebase forge中查找相同的数据（转到浏览器中的https://crowdfluttr.firebaseio.com/ideas/），您会看到正确的网址是：

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

那＆＃39; 0＆＃39;你正在使用的是来自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()
      });
  };
}]);

我很快就在你的codepen中给了它一个旋转，这似乎有效。

如何在Firebase中的数组中向项添加新值？

1 个答案:

错别字

概念