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


Tags: javascript,css,angularjs

Problem :

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


Solution :

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>

    CSS Howto..

    How to switch tabs and change css class on click using Angular2?

    How do I place text to the right of a relatively positioned image?

    How to use CSS to horizontally fill the width of page with HTML menu headers?

    Bootstrap - How to keep the natural container layout while fixing the container to the bottom?

    How to apply jQuery on css selector :before [duplicate]

    How to change the indentation of all the lines except the first line in bulleted or non bulleted list?

    How to align CSS Input type Text Placeholder Image

    How can I make my footer stay at the bottom with a dynamically re-sizable form?

    How to change the text my button displays?

    CSS - how to make content fit to the width/height of paragraph?

    How do I achieve a fully working image scrolling effect like in this example?

    How can I make an image carousel with only CSS?

    How to do scale to fit in my case?

    How to get user submission to post to page

    How to add hanging indent to the labels of a checkbox customized with custom icons in CSS?

    How to increase the gap between text and underlining on my navbar links

    How to convert px from photoshop to css

    How do I control the wrapping of these
  • items?
  • How to change colour of Bootstrap scroll spy and why won't my logos resize?

    How to make div css background hover

    How to auto fit input field after dynamically added spans?

    How to apply css to a dynamically created div?

    How to implement MVC style on my PHP/SQL/HTML/CSS code?

    how to position radio button outside of a block with css

    How to set style of active page number in ASP.NET GridView Pager?

    How can I override an external css?

    How to make AngularJS Materials drop down menues more visable?

    how to reduce the size of all component in sencha application

    How to add 'important' to zIndex

    How to use different CSS opacity in a nested div? [duplicate]