Présentation de la disposition angulaire lors de l'utilisation de ng-repeat

Question

J'ai le code suivant dans l'un de mes fichiers html angulaires. J'essaie d'obtenir des éléments div adjacents les uns aux autres avec ng-repeat dans un carrousel.

Voici ce que j'ai fait jusqu'ici.

<div class="carousel-inner" role="listbox"> 

      <div class="item active" layout="row"> 
       <div class="message" flex=33 
        ng-repeat="message in messages.images " layout-align="start end" 
        ng-if="$index > 0 && $index < 3"> 
        <span class="video-message-name">{{message.text}}</span> 
       </div> 
      </div> 
      <div class="item" layout="row"> 
       <div class="message" flex=33 
        ng-repeat="message in messages.images " layout-align="start end" 
        ng-if="$index > 2 && $index < 6"> 
        <span class="video-message-name">{{message.text}}</span> 
       </div> 
      </div> 

      <div class="item" layout="row"> 
       <div class="message" flex=33 
        ng-repeat="message in messages.images " layout-align="start end" 
        ng-if="$index > 6 && $index < 9"> 
        <span class="video-message-name">{{message.text}}</span> 
       </div> 
      </div> 


     </div> 

La question est que je suis ici les divs attendent de regarder ce que

message 1 message 2 message 3 

Mais il vient comme

message 1 

message 2 

message 3 

Quelqu'un peut-il me aider à comprendre mises en page dans ce contexte.

Answer 1

C'est pas angulaire c'est sur le CSS, vous pouvez essayer:

.item{ 
    width: 100% 
}  
.message{ 

    float:left; 
    display: inline-block; 
    width: 33% 
} 

Online Demo