How can set text row limit using angularJs ng-repeat?

Question

I have angularJs ng-repeat i want to set max row limit (3 rows) on ng-repeat because user can add multiple values using modal window so this div is increasing.

How can i achieve that task using angularJs or with 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;
}

if you can add your controller class as a code snippet, your question would be more clear — oguzhan00, May 03 '16 at 17:25
in controllers i don't have any logic just binding array of object to ng-repeat directive — hussain, May 03 '16 at 17:42
Possible duplicate of [ngRepeat - limiting number of displayed results](http://stackoverflow.com/questions/17643361/ngrepeat-limiting-number-of-displayed-results) — mhodges, May 03 '16 at 17:46
Also a duplicate of http://stackoverflow.com/questions/30201046/angular-limitto-and-track-by-index — mhodges, May 03 '16 at 17:47

dmoo · Accepted Answer · 2016-05-03T17:57:04.560

4

You can use limitTo to cap the number of rows -

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

edited May 03 '16 at 17:57

answered May 03 '16 at 17:28

dmoo

1,509
13
16

1

You need to put your tack by after the limitto - limitTo:3 track by selectedOwner.workerKey – dmoo May 03 '16 at 17:43

score 0 · Answer 2 · answered May 03 '16 at 17:41

dmoo's solution should be the accepted answer. However, it is also worth mentioning that you can also check the index against a hard-coded value or an angular expression/variable value like so:

$scope.maxRowLimit = 3;

<div ng-repeat="item in items" ng-if="$index < maxRowLimit">
    //stuff
</div>

How can set text row limit using angularJs ng-repeat?

2 Answers2