如何在火力地堡阵列中添加一个新值的项目吗？ [英] How to append a new value to an item within an array in Firebase?
问题描述
在火力地堡，我有一个列表的想法。如果用户presses的想法相关的按钮，我想的值被附加到称为属性下，这种想法为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-重复展现思想的阵列，并创建一个相关的按钮被称为附加价值。我想要一个新的值被附加到这个想法的属性，叫做为newValue用户每次presses附加价值。
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()
});
};
}]);
请参阅我的codePEN为我工作的例子：的http：// codePEN .IO / chriscruz /笔/ PwZWKG
See my codepen for my working example: http://codepen.io/chriscruz/pen/PwZWKG
更多的注意事项：
我understnad那AngularFire提供$ add（）和$保存（）来修改这个数组，但我怎么能使用这些方法，这样我可以在数组中的项下添加一个新的字符串''。
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.
推荐答案
我不知道，如果这些是你的问题，但是他们都在code以上和codePEN失误两个typoes：错别字和概念。
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.
您忘记注入 $火力到控制器，从而导致：
You forgot to inject $firebase into the controller, which leads to:
的ReferenceError：$火力点没有定义
"ReferenceError: $firebase is not defined"
解决方案是一个简单的过程：
Solution is simply of course:
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";
如果你发现自己犯这种错误更多的时候，你可能是由孩子功能更好的服务器。虽然这通常是一个比较code，它更倾向于少这个错字错字。创建裁判的为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");
概念
随着那些琐碎的错别字出的方式，我们可以专注于真正的问题：这是最简单的，看看你CONSOLE.LOG您生成的网址：
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
然而，如果你抬头的火力地堡锻造相同的数据（由去的https：//crowdfluttr.firebaseio .COM /创意/ 在浏览器中），你会看到正确的网址是：
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数组中的想法的索引。但它不是在键的火力地堡用来这种想法。当AngularFire与 $ asArray 加载数据其映射的火力地堡键角索引。我们需要执行相反的操作写入新的价值理念是：我们需要回到火力地堡键映射数组索引（在 ID）。对于您可以拨打 [$ keyAt（ID）] [1] 。既然你保持想法创意数组，那简直是：
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");
所以控制器现在变成了：
So the controller now becomes:
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，这似乎工作。
I quickly gave it a spin in your codepen and this seems to work.
这篇关于如何在火力地堡阵列中添加一个新值的项目吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
