How to limit the characters displayed in a entry in AngularJS

Question

I have a table and I am wondering how I can limit the number of characters displayed in the <td> entries so that if one goes over the limit a '...' is displayed, possibly allowing a user to click it for it to expand.

<table st-table="displayedCollection" st-safe-src="main.quizCollection" class="table table-striped table-condensed table-bordered" ng-show="main.tab === 'active'">
        <thead>
            <tr>
                <th st-sort="Internal.quizName">Name</th>
                <th st-sort="Internal.description">Description</th>
                <th st-sort="Internal.dateCreated">Date Created</th>
                <th st-sort="Internal.timesTaken">Times Taken</th>
                <th>URL</th>
                <th>View More</th>
                <th>Copy</th>
                <th>Export</th>
                <th>Deactivate</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="quiz in displayedCollection | filter:'active': true">
                <td>{{quiz.Internal.quizName}}</td>
                <td>{{quiz.Internal.description}}</td>
                <td>{{quiz.Internal.dateCreated}}</td>
                <td>{{quiz.Internal.timesTaken}}</td>
                <td><button class="btn btn-default" clip-copy="main.copyURL(quiz)"><i class="fa fa-share-square-o"></i></button></td>
                <td><a href="#/view-more/{{quiz.$id}}" class="btn btn-info"><i class="fa fa-eye"></i></a></td>
                <td><a href="#/copy/{{quiz.$id}}" class="btn btn-default"><i class="fa fa-clipboard"></i></a></td>
                <td><button class="btn btn-default" ng-csv="main.export(quiz)" csv-header="main.csvHeader" lazy-load="true" filename="{{quiz.Internal.quizName}}.csv"><i class="fa fa-floppy-o"></i></button></td>
                <td><button class="btn btn-danger" ng-click="main.deactivate(quiz)"><i class="fa fa-ban"></i></button></td>
            </tr>
        </tbody>
    </table>

I'm using ng-smart-table. The other solution would be that if a <td> is too long then the column gets taller but not wider.

Angular has a built in filter 'limitTo' which will do this, very easy to use. https://docs.angularjs.org/api/ng/filter/limitTo — ribsies, Feb 13 '15 at 20:56

score 20 · Answer 1 · edited May 23 '17 at 11:53

20

You can do this in CSS. Set the max-width of the column and also apply text-overflow: ellipsis. For example:

<td class="ellipsis">{{quiz.Internal.description}}</td>

and in your CSS:

.ellipsis {
    max-width: 40px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

(see this answer for more info)

edited May 23 '17 at 11:53

Community

1
1

answered Feb 13 '15 at 20:54

Brent Washburne

12,904
4
60
82

Doesn't work on `td`s. – fiatjaf Feb 22 '17 at 15:24
1

I edited the answer to include the required CSS lines – Brent Washburne Feb 22 '17 at 16:22
1

`max-width` does the trick for `td`s. `width` does not work. – Naveed Apr 04 '18 at 07:48

score 1 · Answer 2 · answered Feb 13 '15 at 20:54

1

Seems to me like a perfect application of AngularJS Filters

Usage would be something like:

<td>{{quiz.Internal.quizName | limitChars:20}}</td>

answered Feb 13 '15 at 20:54

John Bledsoe

17,142
5
42
59

Okay I used that, however what if I want the ability to add the '...' and the ability to click on it to see the rest of what got cut off? – noah Feb 13 '15 at 21:04
You won't be able to get the click behavior you want with a filter. You're in AngularJS Directive territory now I believe. – John Bledsoe Feb 13 '15 at 21:42
how could I do that in angular 4? – Marcel Feb 09 '18 at 13:09
I solved with slice. Thanks. – Marcel Feb 09 '18 at 13:14

How to limit the characters displayed in a entry in AngularJS

2 Answers2

Linked