AngularJS ng-repeat溢出

Question

我正在尝试在固定宽度的容器内输出html锚。 使用angular的ng-repeat时，链接会在容器外部溢出。 以下是ng-repeat的代码段。 有关溢出的示例，请参考jsfiddle。

http://jsfiddle.net/n1Lkybwf/2/

<div style="width: 200px; padding: 5px; border: solid 3px #000;">
    <a ng-repeat="tag in tags" style="margin-right: 5px;">{{tag}}</a>
</div>

Answer 1

问题在于容器的宽度是在渲染DOM之前计算的（DOM渲染是异步的）。 在Angular中，这是事物发生的顺序...

默认情况下，锚标记显示为行内块，而简单div显示为块。 这就是为什么解决方案是ng- div重复div而不是anchor标签，然后通过使用display：inline-block设置div的样式来修复块显示。

  <div class="tag" ng-repeat="tag in tags" style="display:inline-block;">
    <a  style="margin-right: 5px;">{{tag}}</a>
  </div>

这是一个工作的小提琴： http : //jsfiddle.net/9zhc3bqu/

Answer 2

您可以添加一个div并将ng-repeat放在div上，如下所示

<div ng-controller="MyCtrl">
    <div style="width: 200px; padding: 5px; border: solid 3px #000;">
        <div ng-repeat="tag in tags">
        <a  style="margin-right: 5px;">{{tag}}</a>
        </div>
    </div>

     <div style="width: 200px; padding: 5px; border: solid 3px #000; margin-top: 10px;">
         <a style="margin-right: 5px;">sampletag1</a>
         <a style="margin-right: 5px;">sampletag2</a>
         <a style="margin-right: 5px;">sampletag3</a>
         <a style="margin-right: 5px;">sampletag4</a>
    </div>
</div>

Answer 3

可能是您可以使用滚动条隐藏溢出部分

<div ng-controller="MyCtrl">
    <div style="overflow-y : scroll;width: 200px; padding: 5px; border: solid 3px #000;">
        <a ng-repeat="tag in tags" style="margin-right: 5px;">{{tag}}</a>
    </div>

     <div style="width: 200px; padding: 5px; border: solid 3px #000; margin-top: 10px;">
         <a style="margin-right: 5px;">sampletag1</a>
         <a style="margin-right: 5px;">sampletag2</a>
         <a style="margin-right: 5px;">sampletag3</a>
         <a style="margin-right: 5px;">sampletag4</a>
    </div>
</div>

或者<br/>标记也可以。

<div ng-controller="MyCtrl">
    <div style="overflow-y : scroll;width: 200px; padding: 5px; border: solid 3px #000;">
        <a ng-repeat="tag in tags" style="margin-right: 5px;">{{tag}}<br/></a>
    </div>

     <div style="width: 200px; padding: 5px; border: solid 3px #000; margin-top: 10px;">
         <a style="margin-right: 5px;">sampletag1</a>
         <a style="margin-right: 5px;">sampletag2</a>
         <a style="margin-right: 5px;">sampletag3</a>
         <a style="margin-right: 5px;">sampletag4</a>
    </div>
</div>

Answer 4

您具有固定宽度（200px），这就是为什么容器不随内部元素一起扩展的原因。

如果希望容器随元素一起扩展，则应删除宽度并更改显示。

http://jsfiddle.net/cmbnyack/1/

或如Bhaskor Jyoti Sarmah所建议的overflow:scroll;

Answer 5

尝试这个

<div ng-controller="MyCtrl">
    <div style="width: 200px; padding: 5px; border: solid 3px #000;">
        <a ng-repeat="tag in tags" style="margin-right: 5px;">
            <span ng-if="(tags_inx%2) != 0">
            {{tag}}
</span>
            <span ng-if="(tags_inx%2) == 0">
            {{tag}}<br/>
</span>
</a>
    </div>

     <div style="width: 200px; padding: 5px; border: solid 3px #000; margin-top: 10px;">
         <a style="margin-right: 5px;">sampletag1</a>
         <a style="margin-right: 5px;">sampletag2</a>
         <a style="margin-right: 5px;">sampletag3</a>
         <a style="margin-right: 5px;">sampletag4</a>
    </div>
</div>