如何使用angularJs ng-repeat添加滾動條？

我有angularJS ng-repeat我想添加滾動條到列表項，因爲它可能有4000個字符的字段，所以在那種情況下，我如何設置滾動條基於行或最大高度爲div？如何使用angularJs ng-repeat添加滾動條？

main.html中

<div class="row"> 
    <div class="col-md-12"> 
     <div class="panel panel-primary"> 
      <div class="panel-heading clearfix"> 
       <h3 class="panel-title">Notification<span class="badge">{{tests.length}}</span></h3> 
      </div> 
      <div class="panel-body"> 
       <ul> 
        <li class="slide" ng-repeat="test in tests"> 
         <div class="alert" role="alert" ng-class="{'alert-info': notification === 'H'}"> 
          <span>{{test}}</span> 
         </div> 
        </li> 
       </ul> 
      </div> 
     </div>  
    </div> 
</div>

來源

2016-05-16 hussain

'最大高度：xxx'和'溢出-Y：auto'爲'面板body'？ – Georgy

你認爲我應該添加助手類來完成這個任務，因爲我們有面板體應用程序將會受到影響？ – hussain

取決於你想達到的目標，但是是的，海事組織最好是增加額外的課程，而不是覆蓋標準課程。 – Georgy

我覺得這一個HTML的問題。嘗試將此CSS添加到您的代碼中：

.panel-body { 
    overflow: scroll; 
    height: 100px; 
}

overflow是overflow-x和overflow-y的組合。如果只需要爲垂直溢出添加滾動條，則只需使用overflow-y：scroll;如果你不想在小內容時看到滾動條，請嘗試溢出：自動。

來源

2016-05-16 15:02:11 user3601578

我認爲當檢索到的數據（tests）是一個確定的值時，OP想要滾動。 ng-class是你的朋友在這裏。

<style> 
    .conditionalScroll{ 
     width: 100%; 
     height: 225px; /*change to your liking*/ 
     overflow: scroll; 
    } 
</style> 
<!-- you may change threshold to your liking as well --> 
<div ng-class="{conditionalScroll:tests.length>100}"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div class="panel panel-primary"> 
       <div class="panel-heading clearfix"> 
        <h3 class="panel-title">Notification<span class="badge">{{tests.length}}</span></h3> 
       </div> 
       <div class="panel-body"> 
        <ul> 
         <li class="slide" ng-repeat="test in tests"> 
          <div class="alert" role="alert" ng-class="{'alert-info': notification === 'H'}"> 
           <span>{{test}}</span> 
          </div> 
         </li> 
        </ul> 
       </div> 
      </div>  
     </div> 
    </div> 
</div>

來源

2016-05-16 15:02:13 chakeda

我想你只需要添加一個樣式類「面板身體containining的最大高度和溢出值...像下面的：

CSS

.panel-body {max-height:400px;overflow:scroll;}

或者如果你想添加另一個類，所以你不會影響面板主體類，那麼要在面板的主體上添加一個新類，如下面的

<div class="row"> 
    <div class="col-md-12"> 
     <div class="panel panel-primary"> 
      <div class="panel-heading clearfix"> 
       <h3 class="panel-title">Notification<span class="badge">{{tests.length}}</span></h3> 
      </div> 
      <div class="panel-body panel-scroll"> 
        <ul> 
         <li class="slide" ng-repeat="test in tests"> 
          <div class="alert" role="alert" ng-class="{'alert-info': notification === 'H'}"> 
           <span>{{test}}</span> 
          </div> 
         </li> 
        </ul> 
      </div> 
     </div>  
    </div> 
</div>

CSS

.panel-scroll {max-height:400px;overflow:scroll;}

來源

2016-05-16 15:02:55

如何使用angularJs ng-repeat添加滾動條？

回答

相關問題