Name: angular-ellipsis
Owner: Topcoder
Description: Angular directive to truncate multi-line text to visible height
Forked from: dibari/angular-ellipsis
Created: 2016-01-28 09:11:50.0
Updated: 2016-01-28 09:11:51.0
Pushed: 2016-01-04 10:53:19.0
Size: 464
Language: JavaScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
Angular directive to truncate multi-line text to visible height. The end of the visible text is appended with an ellipsis, optional text, and optional click callback function.
To use, copy src/angular-ellipsis.js to your project and rename the included module (which is set to 'exampleApp' at the bottom) to your own module.
Or, to install via Bower:
r install angular-ellipsis
and then inject into your app:
myApp = angular.module('myApp', ['dibari.angular-ellipsis']);
Angular Ellipsis Directive demo page
<p data-ng-bind="paragraphText" data-ellipsis></p>
Custom Ellipsis Symbol
A custom ellipsis string can be used. If this value is set, it will replace the default ellipsis (…). This value will be appended at the end of the truncated text, before a custom append (if included). Example:
<p data-ng-bind="paragraphText" data-ellipsis data-ellipsis-symbol="--"></p>
<p data-ng-bind="paragraphText" data-ellipsis data-ellipsis-append="read more" data-ellipsis-symbol="--"></p>
Custom Append Text
You can include a custom string after the ellipsis by setting the attribute ellipsis-append/data-ellipsis-append on the element. This value may be bound to a scope variable instead of just being a static string. If a scope value is used, the direcive will update the appended text on its update. Only text may be used, not HTML. When rendered in the truncated text, this custom string wrapped in a span tag, and can be styled through CSS as usual. Examples:
<p data-ng-bind="paragraphText" data-ellipsis data-ellipsis-append="read more"></p>
<p data-ng-bind="paragraphText" data-ellipsis data-ellipsis-append="scope.appendString"></p>
Custom Append Text Click Function
If a custom append string is included, a function can be executed on the resulting span tag's click. The function must exist within the controller's scope. If an ellipsis append string is not included, the function will not execute (since it has no element to bind to). Example:
<p data-ng-bind="paragraphText" data-ellipsis data-ellipsis-append="read more" data-ellipsis-append-click="onClickFunction()"></p>
Custom String Separator
You can use string separator to split the string by something else than " " (space). Example (split by characters):
<p data-ng-bind="paragraphText" data-ellipsis data-separator=""></p>
Works on modern web browers, which includes any relatively recent version of Chrome, Firefox, Safari, and IE 9+. Although there is no formally-maintained list, mobile device support is quite thorough. I will update cross-browser and device issues if they are entered as issues.