使用 ng-repeat 时了解 Angular 布局

Question

我的 angular html 文件中有以下代码。我正在尝试在旋转木马中使用 ng-repeat 获取彼此相邻的 div 个元素。

这是我到目前为止所做的。

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

这里的问题是我希望 div 看起来像这样

message 1    message 2    message 3

但它来得像

message 1

message 2

message 3

谁能帮助我理解这种情况下的布局。

Answer 1

这不是关于 Angular 这是关于 CSS 你可以试试：

.item{
    width: 100%
}    
.message{

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

Online Demo

Answer 2

对此也有 angular 解决方案。只需要将 class 'message' div 移动到单个 class 'item' div 下。 'item' div 中的 layout=row 分配从左到右的布局。如果你添加 flex 项目 div 它将填充页面的宽度，然后 flex="33" 可以从子元素中删除，因为简单的 flex 会给它们分配相同的宽度。

0 && $索引 {{message.text}} 2 && $索引 {{message.text}} 6 && $索引 {{message.text}}

使用 ng-repeat 时了解 Angular 布局

Understanding Angular layout while using ng-repeat

javascript

angularjs

layout

ng-repeat