angularJs ng-repeatを使ってスクロールバーを追加するには？

Question

私はangularJSを持っていますng-repeat私はスクロールバーをリストアイテムに追加したいのですが、そのフィールドに4000文字あるかもしれないので、divの行または最大高さに基づいてスクロールバーを設定するにはどうすればいいですか？私は、このHTMLの問題だと思う

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> 

Answer 1

。このCSSをコードに追加してください：

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

オーバーフローは、overflow-xとoverflow-yの組み合わせです。垂直オーバーフローのためにスクロールバーを追加するだけでよい場合は、overflow-y：scrollを取るだけです。内容が小さいときにスクロールバーを表示したくない場合は、オーバーフロー：autoを試してください。

Answer 2

検索されたデータ（tests）が特定の値である場合、OPはスクロールしたいと思っています。 ng-classはあなたの友人です。

私は以下のように...あなただけの最大の高さとオーバーフロー値をcontaininingクラスのパネル体 'のスタイルを追加する必要があると思う

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

Answer 3

：

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