hussain hussain - 2 years ago 155
Javascript Question

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

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 ?


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


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 Source

You can use limitTo to cap the number of rows -

<div ng-repeat="ng-repeat="selectedOwner in selectedOwners | limitTo:3 track by selectedOwner.workerKey"">
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download