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

我在AngularJS了一個簡單的聊天應用程序，我將送一個message的正在於前端輸出這樣的觀點：AngularJS - 顯示不同的div基礎上，NG-如果結果

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

任何想法？

來源

2015-05-20 germainelol

do something

– Tom

@湯姆也許我是做一些愚蠢的錯誤，我會再次嘗試。你應該可以在同一個'ng-repeat'右邊包含3個'ng-if'塊？ – germainelol

您是否嘗試過使用'ng-switch'？https：//docs.angularjs.org/api/ng/directive/ngSwitch –

如果您對每個元素的幾種可能的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

來源

2015-05-20 12:51:55

謝謝，另一個答案也是一樣的，但我認爲這在邏輯上與switch語句更加邏輯和相似 – germainelol

你有兩個解決方案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>

來源

2015-05-20 12:41:50 Okazari

還有[ngMessage]（https://code.angularjs.org/1.3.15/docs/api/ngMessages/directive/ngMessage）和[ngMessages]（https://code.angularjs.org/1.3.15/docs/api/ngMessages/directive/ngMessages）Angular 1.3+指令 –

@Sly_cardinal Sweet，不知道這個。不知道它是否適應這個用例，但是指出它！ – Okazari

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

回答

相關問題