Question

我在AngularJS中有一个简单的聊天应用，我正在向前端输出的视图发送message，如下所示：

<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的另一个属性，我将在其中向视图发送不同类型的消息，例如userMe，userOther，global等等，我将需要为每个kind消息使用稍微不同的HTML标记。我知道这应该在AngularJS中使用ng-if完成，但我不知道如何解决这个问题。

从视图中，我需要输出一些不同的HTML，具体取决于message.kind值。

有什么想法吗？

Answer 1

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

我们的想法是，您可以启用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

Answer 2

你有两个解决方案可以达到你想要的目的：

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

或者这个：

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

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

2 个答案: