1. ホーム
  2. javascript

[解決済み] angularJsのng-repeatを使用してスクロールバーを追加する方法は?

2022-02-08 19:36:37

質問

私はangularJSを持っています ng-repeat フィールドに 4000 文字があるため、リストアイテムにスクロールバーを追加したいと思います。 div ?

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>

解決方法は?

HTMLの問題だと思います。このCSSをあなたのコードに追加してみてください。

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

overflowは、overflow-xとoverflow-yの組み合わせです。縦方向のオーバーフローのためにスクロールバーを追加するだけなら、overflow-y: scrollだけを取り、コンテンツが小さいときにスクロールバーを表示したくない場合は、overflow: autoを試してみてください。