如何使用AngularFire将项目添加到列表中某个项目内的特定词典中？

Question

The below code shows a list from firebase and shows a corresponding comment field for each item in the list. The user can make a comment on that item and it will update the comment field for that item in the list. Currently, each time a comment is made, it overwrites the previous one, but I'd like for all comments to be saved.

How do I make it so that every time a comment is added, the previous ones are saved as well?

http://jsfiddle.net/chrisguzman/PS9J2/

indx.html

<div ng-app="MyApp" ng-controller="MyCtrl">
    <div ng-repeat="(id,item) in data">
         <h2>{{item.title}}</h2>

        <input ng-model="item.comment"></input>
        <button type="submit" ng-click="CommentAdd(id)">Comment</button>
    </div>
</div>

app.js

angular.module('MyApp', ['firebase'])
    .controller('MyCtrl',

function MyCtrl($scope, $firebase) {
    var furl = "https://helloworldtest.firebaseio.com";
    var ref = new Firebase(furl);
    $scope.data = $firebase(ref);

    $scope.CommentAdd = function (id) {
        $scope.data.$save(id);
    };

});

The following is the data structure within firebase that is generated {helloworldtest: {-JSQhsAnY5zhf0oVKfbb: {title: "nameA", comment:"Second Comment"}, -JSQhsAnY5zhf0oVKfbb: {title: "nameB", comment:"Second Comment"}} }

However, I'd like to create the following where there is a 'comments' branch that holds all comments.

{helloworldtest: 
{-JSQhsAnY5zhf0oVKfbb: {title: "nameA", comments:{-JSQhsAnY5zhf0oVKfbb:{Comment:"Second Comment"},-JSQhsAnY5zhf0oVKfbb:{Comment:"First Comment"}}},
{-JSQhsAnYdfdfdffbb: {title: "nameA", comments:{-JSQhsAnY5zhf0oVKfAb:{Comment:"Another Comment"},-JSQhsAnY5zhf0oVKfbb:{Comment:"First Comment"}}}
}

I've tried to do this by replacing

$scope.data.$save(id);

with

$scope.data.$add(id);

I've also tried using :

$scope.data[id].$add({foo: "bar"})

Answer 1

You are saving the comment into a field called comment. Instead, use a list called comments and utilize push or $add .

<div ng-app="MyApp" ng-controller="MyCtrl">
    <div ng-repeat="(id,item) in data">
         <h2>{{item.title}}</h2>

        <input ng-model="newComment"></input>
        <button type="submit" ng-click="addComment(id, newComment)">Comment</button>
    </div>
</div>

function MyCtrl($scope, $firebase) {
    var furl = "https://helloworldtest.firebaseio.com";
    var ref = new Firebase(furl+'/items');
    $scope.data = $firebase(ref);

    var $comments = $firebase( commentsRef );

    $scope.addComment = function (id, newComment) {
       ref.child(id).child('comments').push(newComment);
    };

});

Also Don't nest data just because you can . Instead, consider putting comments in their own path, items in their own path.