如何将新值附加到 Firebase 数组中的项目? [英] How to append a new value to an item within an array in Firebase?
问题描述
在 Firebase 中，我有一个想法"列表.如果用户按下与该想法关联的按钮，我希望在名为newValue"的属性下为该想法附加一个值.
Within Firebase, I have a list of 'ideas.' If a user presses a button associated with the idea, I'd like a value to be appended to that idea under an attribute called 'newValue.'
例如，下面的 html 使用 ng-repeat 显示想法数组并创建一个名为附加值"的关联按钮.每次用户按下附加值"时，我都希望将一个新值附加到名为newValue"的想法属性中.
For example, the below html, uses ng-repeat to show the array of ideas and creates an associated button called 'Append Value.' I want a new value to be appended to the idea's attribute called 'newValue' every time a user presses 'Append Value.'
<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>
下面是我尝试创建这个函数的过程.
Below is my attempt to create this function.
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
See my codepen for my working example: http://codepen.io/chriscruz/pen/PwZWKG
更多注意事项:我不知道 AngularFire 提供了 $add() 和 $save() 来修改这个数组，但是我怎么能使用这些方法，以便我可以在数组中的一个项目下添加一个新的字符串".
More Notes: I understnad that AngularFire provides $add() and $save() to modify this array, but how could I use these methods so that I can add a new 'string' under an item in an array.
推荐答案
我不确定这些是否是您的问题，但它们是上面代码和 codepen 中的两个错误:错别字和概念性错误.
I'm not sure if these are your problems, but they are two typoes of mistakes in the code above and the codepen: typos and conceptual.
您忘记将 $firebase 注入控制器，导致:
You forgot to inject $firebase into the controller, which leads to:
参考错误:未定义 $firebase"
"ReferenceError: $firebase is not defined"
解决方案当然很简单:
app.controller("ctrl", ["$scope","Ideas", "$firebase", function($scope,Ideas,$firebase) {
此外，您似乎在 newValue 之前缺少一个斜线，这意味着您正在尝试创建一个新想法，而不是将值添加到现有想法中.解决方法又简单了，在newIdea前加一个斜线，如:
In addition you seem to be missing a slash before newValue, which means that you're trying to create a new idea instead of adding the value to an existing one. Solution is simple again, add a slash before newIdea as in:
var URL = "https://crowdfluttr.firebaseio.com/ideas/" + id + "/newValue";
如果您发现自己更频繁地犯此错误，child 功能可能会更好地为您服务.虽然它通常是更多的代码，但它不太适合这种拼写错误.创建对 newValue 节点的引用变为:
If you find yourself making this mistake more often, you might be better server by the child function. Although it typically is a bit more code, it lends itself less to this typo of typo. Creating the ref to the newValue node becomes:
var URL = "https://crowdfluttr.firebaseio.com/ideas/";
var IdeaRef = new Firebase(URL).child(id).child("newValue");
概念
排除了那些琐碎的拼写错误，我们可以专注于真正的问题:如果您将生成的 URL 控制台记录到最容易看到的问题:
Conceptual
With those trivial typos out of the way, we can focus on the real problem: which is easiest to see if you console.log the URL that you generate:
https://crowdfluttr.firebaseio.com/ideas/0/newValue
但是，如果您在 Firebase forge 中查找相同的数据(通过转到 https://crowdfluttr.firebaseio.com/ideas/)，您会看到正确的 URL 是:
Yet if you look up the same data in the Firebase forge (by going to https://crowdfluttr.firebaseio.com/ideas/ in your browser), you'll see that the correct URL is:
https://crowdfluttr.firebaseio.com/ideas/-JbSSmv_rJufUKukdZ5c/newValue
您使用的0"来自 id，它是 AngularJS 数组中的想法的索引.但 Firebase 用于这个想法的并不是 key.当 AngularFire 使用 $asArray 加载您的数据时，它会将 Firebase 键映射到 Angular 索引.我们需要执行相反的操作来将新值写入想法:我们需要将数组索引(在 id 中)映射回 Firebase 键.为此，您可以调用 [$keyAt(id)][1].由于您将想法数组保存在 Ideas 中，因此很简单:
That '0' that you're using comes from the id and it is the index of the idea in the AngularJS array. But it is not the key that Firebase uses for this idea. When AngularFire loads your data with $asArray it maps the Firebase keys to Angular indexes. We need to perform the reverse operation to write the new value to the idea: we need to map the array index (in id) back to the Firebase key. For that you can call [$keyAt(id)][1]. Since you keep the array of ideas in Ideas, it is simply:
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()
});
};
}]);
我很快在你的代码笔中试了一下，这似乎有效.
I quickly gave it a spin in your codepen and this seems to work.
这篇关于如何将新值附加到 Firebase 数组中的项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
