AngularJS - 顯示不同的div基礎上，NG-如果結果

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完成，但我不知道如何去做這件事。

從視圖來看，我需要根據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

Answer 2

你有兩個解決方案archieve你想要什麼：

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