Geek Answers Handbook

AngularJS: how to show ellipses using the limitTo filter only when the string exceeds the limit

I use the limitTo filter for some lines. If the string is smaller, for example, 10 characters, then the string is displayed as is. If the string is longer than 10 characters, I want to display ellipses after cutting the string on the tenth character. Is there an angular shortcut for this? Thanks

eg:

{{main.title | limitTo:10}}

if main.title = "Good day", the output will be: Good day

if main.title = "A Terrible Day", the output will look like this: Awful ...

+11
source share
8 answers

Well, if you want, you can create a filter for this, but I would use the ngIf directive, as shown below:

 (function() { 'use strict'; angular.module('app', []) .controller('mainCtrl', function() { var vm = this; vm.text = 'Really longer than 10'; }); })(); 
 <!DOCTYPE html> <html ng-app="app"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.7/angular.min.js"></script> </head> <body ng-controller="mainCtrl as ctrl"> Without limit: <span ng-bind="ctrl.text"></span> <hr> With limit: <span ng-bind="ctrl.text | limitTo:10"></span> <span ng-if="ctrl.text.length > 10">...</span> </body> </html>
+25
source

Hope this helps:

 {{ main.title | limitTo: 10 }}{{main.title.length > 10 ? '...' : ''}}
+33
source

Use <span ng-class="{'ellipsis': text.length > limit}">{{text | limitTo:limit}}</span> <span ng-class="{'ellipsis': text.length > limit}">{{text | limitTo:limit}}</span>

You need to define the css .ellipsis:after{ content: '...'; } class .ellipsis:after{ content: '...'; } .ellipsis:after{ content: '...'; } and the scope variable limit

OR

 {{ text.length > limit ? ((text | limitTo:limit) + "...") : text }} 

 (function() { "use strict"; angular.module('app', []) .controller('mainCtrl', function($scope) { $scope.text = "Hello World"; $scope.limit = 10; }); })(); 
 .ellipsis:after{ content: '...'; } 
 <!DOCTYPE html> <html ng-app="app"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> </head> <body ng-controller="mainCtrl"> <h3>Using Option1</h3> <span ng-class="{'ellipsis': text.length > limit}">{{ text | limitTo:limit }}</span> <br> <h3>Using Option2</h3> <span>{{ text.length > limit ? ((text | limitTo:limit) + "...") : text }}</span> </body> </html>
+4
source

Writing your own filter based on limitTo is the best way to do this.

 angular.module('your-module-name').filter('dotsFilter', [ '$filter', function ($filter) { /** * Shorten the input and add dots if it needed * @param {string} input * @param {number} limit */ function dotsFilter(input, limit) { var newContent = $filter('limitTo')(input, limit); if(newContent.length < input.length) { newContent += '...'; } return newContent; } return dotsFilter; } ]);

Use in mind:

 {{ model.longTextData | dotsFilter:10 }}
+4
source

Since other answers using angularjs have already been submitted, I will give you a simple CSS method to do this.

  (function() { "use strict"; angular.module('app', []) .controller('mainCtrl', function($scope) { $scope.text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book"; }); })(); 
 span.ellipsis { display:inline-block; width:180px; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; } 
  <!DOCTYPE html> <html ng-app="app"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> </head> <body ng-controller="mainCtrl"> <span ng:class="{true:'ellipsis', false:''}[text.length>=10]" style="max-width: 10ch;">{{text}}</span> </body> </html>
+2
source 
 <div maxlength="59"> {{row.RequestTitle.length > 59 ? row.RequestTitle.substr(0,59) + '...' : row.RequestTitle}} </div>

this is useful and works, Angular 5 Material UI

+1
source

Someone reading in the future might consider using CSS instead of JS. Sort of:

 .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
0
source

If someone wants to use the ellipsis logic in the controller, then the following code snippet will be useful:

 $filter('limitTo')(input, limit) + (input.length > limit ? '&hellip;' : '');

Where input and limit will be the " input string" and a numerical limit value, for example

 $filter('limitTo')(stringText, 20) + (stringText.length > 20 ? '&hellip;' : '');
-one
source

More articles:


All Articles