CODEWITHSUNDEEP
javascripthtmlcssangularjs
germainelol
germainelol

Reputation: 3331

AngularJS - Showing different divs based on the ng-if result

I've got a simple chat app in AngularJS, and I'm sending a message to the view which is being outputted on the front end like this:

<div id="messages" class="col-xs-12 chat-messages">
    <div class="col-xs-12 chat-message" ng-repeat="message in chatMessages">

        <div class="you">
            <ul class="media-list">
                <li class="media">
                    <div class="media-left">
                        <div class="media-object img-circle" style="background-image: url( {{message.avatar_url}} )"></div>
                    </div>
                    <div class="media-body">
                        <div class="media-heading text-muted small">
                            {{message.nickname}}
                        </div>
                        <div class="message-content bubble">
                            {{message.content}}
                        </div>
                    </div>
                </li>
            </ul>
        </div>

    </div>
</div>

At the moment I am just going through the chatMessages array and outputting them using this div. I have given each message another attribute of kind where I will send to the view different kinds of messages, such as userMe, userOther, global etc. and I will need to use a slightly different HTML markup for each kind of message. I understand that this should be done using ng-if in AngularJS, but I don't quite know how to go about this.

From the view, I will need to output some different HTML depending on the message.kind value.

Any ideas?

Upvotes: 0

Views: 106

Answers (2)

Omri Aharon
Omri Aharon

Reputation: 17064

If you have several possible div options for each element, I'd use ng-switch, like Tom said in the comments.

The idea is that you switch on the message.kind, or whatever you want to switch on, and have each div as a "Case" for that:

It would look something like this:

<div class="media-body"  ng-switch="message.kind">
        <div class="media-heading text-muted small"  ng-switch-when="1">
              {{message.nickname}}
        </div>
        <div class="message-content"  ng-switch-when="2">
              {{message.content}}
        </div>
        <div class="message-content bubble"  ng-switch-default>
              default text
        </div>
</div>

Fiddle

Upvotes: 2

Okazari
Okazari

Reputation: 4597

You have two solution to archieve what you want :

<div ng-repeat="msg in messages">
    <div ng-if="msg.kind === 'userMe'">userMeMessage</div>
    <div ng-if="msg.kind === 'global'">globalMessage</div>
    ...
</div>

Or this :

<div ng-repeat="msg in messages|filter:{kind:'userMe'}">
  UserMe
</div>
<div ng-repeat="msg in messages|filter:{kind:'global'}">
  Global
</div>

Upvotes: 1

Related Questions