Question

我有angularJS ng-repeat我想在列表项中添加滚动条，因为它可能在字段中有4000个字符，因此在这种情况下如何根据行设置滚动条或为{的最大高度设置滚动条{1}}？

main.html中

div

Answer 1

我认为这是一个HTML问题。尝试将此CSS添加到您的代码中：

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

溢出是overflow-x和overflow-y的组合。如果你只需要为垂直溢出添加滚动条，只需要使用overflow-y：scroll;如果您不希望在内容较小时看到滚动条，请尝试overflow：auto。

Answer 2

我认为当检索到的数据（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>

Answer 3

我认为你只需要为课程添加一种风格＆＃39; panel-body＆＃39;包含最大高度和溢出值...如下所示：

CSS

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

或者如果你想添加另一个类，这样你就不会影响panel-body类，那么在该页面的panel-body中添加一个新类，如下所示

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

CSS

params string[]

如何使用angularJs ng-repeat添加滚动条？

3 个答案: