1

I am using Firebase in a pretty simple chat application. One of the features i'm working on now is the ability to update messages in the chat room, but only if you were the original author. For the editing i have an icon that, when clicked, will do some javascript to hide the message div and display a previously hidden div that has the update form in it. But i only want this to be available if you were the author of the message. Here's what the code looks like:

<li class="message phm pvm pull-left" ng-repeat="(msgId,msg) in room.messages">
  <div class="message-current" data-message-id="{{msgId}}">
    <span class="message-author pull-left">{{msg.author}}</span>
    <span class="message-body pull-left pls">{{msg.body}}</span>
    <span class="message-timestamp pull-right prs">
      {{msg.timestamp | date:'MMM d, yyyy h:mm a'}}
      <a class="message-update-link" href="#" ng-click="showMessageUpdate(msgId)"><span class="glyphicon glyphicon-pencil"></span></a>
    </span>
  </div>
  <div class="message-update hidden" data-message-id="{{msgId}}">
    <form class="form-inline" ng-submit="updateMessage(roomId, msgId, '<%= current_user.full_name %>')">
      <textarea class="form-control update-message" ng-model="msg.body" ng-trim="false">{{msg.body}}</textarea>
      <input class="button button-large button-primary" type="submit" value="Update">
    </form>
  </div>
</li>

Right now, i can only get it to have updatable message for ALL message or no messages. Basically, the part i am stuck on is the check of whether or not the angularjs value of {{msg.author}} is equal to the rails value of <%= current_user.id %>. Any thoughts on how this can be achieved? Thanks for any help!

SOLVED:
Thanks to Jiten for the step in the right direction. I'm new to learning AngularJS and it's pretty complex. Sometimes you just need to know where to start.

I ended up using a combination of the ngIf directive and the angular.equals function. In my rails view i used ng-if="isAuthor(msg.author, '<%= current_user.full_name %>')" on anything i wanted available to authors of that message only. This will evaluate the response of isAuthor() and only render to the dom if it evaluates to true. The code above now looks like this:

<li class="message phm pvm pull-left" ng-repeat="(msgId,msg) in room.messages">
  <div class="message-current" data-message-id="{{msgId}}">
    <span class="message-author pull-left">{{msg.author}}</span>
    <span class="message-body pull-left pls">{{msg.body}}</span>
    <span class="message-timestamp pull-right prs">
      {{msg.timestamp | date:'MMM d, yyyy h:mm a'}}
      <a ng-if="isAuthor(msg.author, '<%= current_user.full_name %>')" class="message-update-link" href="#" ng-click="showMessageUpdate(msgId)"><span class="glyphicon glyphicon-pencil"></span></a>
    </span>
  </div>
  <div ng-if="isAuthor(msg.author, '<%= current_user.full_name %>')" class="message-update hidden" data-message-id="{{msgId}}">
    <form class="form-inline" ng-submit="updateMessage(roomId, msgId, '<%= current_user.full_name %>')">
      <textarea class="form-control update-message" ng-model="msg.body" ng-trim="false">{{msg.body}}</textarea>
      <input class="button button-large button-primary" type="submit" value="Update">
    </form>
  </div>
</li>

Here is what isAuthor() looks like in my AngularJS controller:

$scope.isAuthor = function(msgAuthor, currentUser) {
   return angular.equals(msgAuthor, currentUser);
}

Pretty simple really!

1 Answer 1

1

To compare two objects you can use:

angular.equals({{msg.authorId}}, <%= current_user.full_name %>)
Sign up to request clarification or add additional context in comments.

3 Comments

In terms of my code above, where would that line go?
Haha, well thanks for the help though...it does at least point me in a good direction!
I'm marking this as the answer because i feel Jiten should get the recognition for pointing me in the right direction. :) I put the actual code i used to get it to work in the question as an update.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.