Question

我有angularJs ng-repeat我想在ng-repeat上设置最大行限制（3行），因为用户可以使用模态窗口添加多个值，因此这个div正在增加。

如何使用angularJs或css实现该任务？

main.html中

<div class="orcitMultiSelectFieldValues" ng-show="selectedOwners.length" ng-click="openPrcsOwner()" ng-class="{'orcitMultiSelectFieldValues--disabled':!PROCESS_EDIT}">
    <div class="orcitMultiSelectFieldTagList">
        <div ng-repeat="selectedOwner in selectedOwners track by selectedOwner.workerKey" class="orcitMultiSelectTagItem">
            <span>{{selectedOwner.fullName}}</span>
        </div>
    </div>
</div>

的main.css

.orcitMultiSelectFieldTagList{
    min-height: 34px;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 0 0 4px 0;
    cursor: text;
}
.orcitMultiSelectTagItem {
    display: inline-block;
    margin: 4px 0 0 7px;
    background-color: #428bca;
    color: #fff;
    padding: 0 15px 0 5px;
    font-size: 14px;
    line-height: 24px;
    cursor: default;
    transition: box-shadow 100ms linear;
    position: relative
}

.orcitMultiSelectTagItem:hover {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}
.orcitMultiSelectFieldValues--disabled .orcitMultiSelectFieldTagList {
    background-color: #eee;
    cursor: not-allowed;
}

Answer 1

您可以使用limitTo来限制行数 -

<div ng-repeat="ng-repeat="selectedOwner in selectedOwners | limitTo:3 track by selectedOwner.workerKey"">
    //stuff
</div>

Answer 2

dmoo的解决方案应该是公认的答案。但是，值得一提的是，您还可以根据硬编码值或角度表达式/变量值检查索引，如下所示：

new_dict = {}
for i in range(1, 13):
    new_dict[i] = []

如何使用angularJs ng-repeat设置文本行限制？

2 个答案: