javascript - AngularJS - 根据 ng-if 结果显示不同的 div

Question

我在 AngularJS 中有一个简单的聊天应用程序，我正在向前端输出的 View 发送一条消息，如下所示:

<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>

目前我只是浏览 chatMessages 数组并使用此 div 输出它们。我已经为每条消息提供了 kind 的另一个属性，我将在其中向 View 发送不同类型的消息，例如 userMe、userOther、global 等，我需要为每种 kind 消息使用稍微不同的 HTML 标记。我知道这应该在 AngularJS 中使用 ng-if 来完成，但我不太清楚该怎么做。

从 View 来看，我需要根据 message.kind 值输出一些不同的 HTML。

有什么想法吗？

Answer 1

如果每个元素有多个可能的 div 选项，我会使用 ng-switch ，就像汤姆在评论中说的那样。

想法是你打开 message.kind，或者任何你想打开的东西，并将每个 div 作为一个“案例”:

它看起来像这样:

<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