如何限制AngularJS中<td>条目中显示的字符

Question

我有一个表,我想知道如何限制<td>条目中显示的字符数,以便如果超过限制,则显示"...",可能允许用户单击它以进行扩展.

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

我正在使用ng-smart-table.另一个解决方案是,如果a <td>太长,则列会变高但不会变宽.

Answer 1

你可以用CSS做到这一点.设置max-width列并应用text-overflow: ellipsis.例如:

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

在你的CSS中:

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

(有关详细信息,请参阅此答案)

Answer 2

在我看来，这是 AngularJS Filters的完美应用

用法如下：

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