Creating a comment system with AngularFire

Question

My body is layed out as such:

<body class="container" ng-controller="ArticleController as data">
<div class="dataholder" ng-repeat="cd in data.datas">
  <h1 class="title">
    {{cd.name}}<p class="date" ng-show="cd.date.length>0"> @ {{cd.date}}</p>

  </h1>
  <h3 class="description">{{cd.description}}</h3>
  <!-- Comment placement -->
  <div class="commentInput">
  <input class="commentbox" ng-show="cd.commentable==true" type="text" placeholder='Comment on this'>
  <button ng-show="cd.commentable==true" class="button">Post</button>
  </div> 
  <div ng-repeat="comment in cd.comments" ng-show="cd.commentable==true" class="commentdiv">
  <h5>
    {{comment.name}}: <p class="comment">{{comment.text}}<p>
  </h5>
  </div>
</div>

I've imported: * AngularJS, * Firebase, * AngularFire.

I've searched quite a lot and have not found a way to make it able to post data to the firebase from within the ng-repeat enabled div. I want this for a comment system. I would want to do something like:

onclick='thisref.push( <text from the input in my body> )'

In my button.

But I have no idea how to:

Let the code know which ref to use depending on what ng-repeat position it is.
Use the value from the input.

Excuse my bad code. I'm quite new to web-design.

Frank van Puffelen Frank van Puffelen · Accepted Answer · 2014-10-25T11:11:14

What I did is adding a method to the $scope in my controller:

$scope.addCard = function(state) {
    var auth = $firebaseSimpleLogin(new Firebase(FBURL));
    auth.$getCurrentUser().then(function(user) {
        var card = { title: 'Card '+(cards.length+1), created_by: user.username, created_at: Firebase.ServerValue.TIMESTAMP, state: state };
        cards.$add(card);
    });
};

And then wiring that up in the HTML like this:

<a ng-click='addCard(state)' ng-show='auth.user'>Add card</a>

Have a look at app.js and index.html over on https://github.com/puf/trenches, where you'll find a complete-but-minimal application.

Creating a comment system with AngularFire

But I have no idea how to:

1 Answers