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>