AngularJS ng-repeat 溢出答案

【问题标题】：AngularJS ng-repeat overflowAngularJS ng-repeat 溢出
【发布时间】：2015-01-08 22:05:23
【问题描述】：

我正在尝试在固定宽度的容器内输出 html 锚点。使用 Angular 的 ng-repeat 时，链接会溢出容器外。下面是 ng-repeat 的代码 sn-p。溢出示例参考jsfiddle。

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

【问题讨论】：

尝试在链接中添加display:inline-block。
我已将此添加到小提琴中。它似乎无法解决问题。
我没在里面看到它？检查jsfiddle.net/s3f9re29/1
是的，当我把小提琴放在那里时，我忘了保存它。我还将它添加到错误的元素中。你的回答是最干净的。谢谢！

标签： javascript html css angularjs angularjs-ng-repeat

【解决方案1】：

也许你可以使用滚动条来隐藏溢出部分

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

【讨论】：

我不希望有一个滚动条作为修复。小提琴中的第二个 div 是结果的外观。链接应该自动换行。

【解决方案2】：

你有固定宽度（200px），这就是为什么容器不会随着里面的元素展开。

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

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

或者正如 Bhaskor Jyoti Sarmah 建议的那样 overflow:scroll;

【讨论】：

我希望链接包裹在容器内。我不想改变容器。如果您查看小提琴，您可以在溢出下方看到所需的结果。

【解决方案3】：

你可以添加一个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>

【讨论】：

这会将每个锚点放在自己的行上。我希望链接能够内联并自动换行，就像第二个 div 一样。
这似乎产生了预期的结果。有趣的是，angular 注入的 html 不遵守包含的对象。这是注入到 DOM 的 html 的常见情况吗？ angular 输出的 html 与我在小提琴中硬编码的 html 基本相同。

【解决方案4】：

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

默认情况下，锚标记显示为 inline-block 而简单的 div 显示为块。这就是为什么解决方案是 ng-repeat div 而不是锚标记，然后通过使用 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/

【讨论】：

看来使用display: inline-block 可以只应用于锚标签，而不必将其包装在一个div中。

【解决方案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>

【讨论】：

标签后面加一个空格 if (tags_inx%2) != 0