Add three dots to ngbind

Question

I've got a string like this:

<a href="#" ng-bind="::MyString | limitTo:40"></a>

But I need to add three dots after string only with length more than 40, how can I do it?

Answer 1

As commented, you should use CSS to achieve this. This will ensure your data is not change and UI aesthetics are maintained.

Also every character has different width. Its better to check on total width than characters length.

 .limit { width: 200px; text-overflow: ellipsis; } .ellipsis { overflow: hidden; text-overflow: ellipsis; width: 100px; white-space: nowrap; } 

 <input type="text" class="limit"> <div class="ellipsis"> <a href="#">This is a test for ellipsis using CSS</a> </div> 

Answer 2

This is written in ES6, but this filter will let you do what you need:

import * as _ from 'lodash';
/* @ngInject */
export default () => (input, length) =>
  _.size(input) > length ?
  `${input.slice(0, length)}...` : input;

Then you can use that as a filter:

<span data-ng-bind="foo | ellipsis-filter: 20">

Limits it to 20 characters, adds the ellipsis for you.

Answer 3

If you want to solve it in the template without creating a filter yourself you could just do this:

<a href="#" ng-bind="(MyString | limitTo:40) + (MyString.length > 40 ? '...' : '')"></a>

Not as fancy as creating your own filter but should do the trick.