Question

我在一个有角度的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：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="my-list">
  
</ul>

<a href="#" onClick="addItemToList(1)">Add Item</a>

<强> Online Demo

Answer 2

对此也有一个角度解决方案。只需要将这些类“ message” div移到一个类“ item” div下。 'item'div中的layout = row分配从左到右的布局。而且，如果您添加flex项目div，它将填充页面的宽度，那么flex =“ 33”可以从子元素中删除，因为简单的flex会将它们分配为相同的宽度。

0 && $ index {{message.text}} 2 && $ index {{message.text}} 6 && $ index {{message.text}}

使用ng-repeat时了解角度布局

2 个答案: