Menu
I am using the limitTo filter on some strings. If the string is less than, say, 10 characters, then the string is displayed as is. If the string is longer than 10 characters, I want to display ellipses after cutting off the string at the tenth character. Is there an angular shortcut to doing this? Thanks
for example:
{{main.title | limitTo:10}}
if main.title = "A Good Day", the output would be: A Good Day
if main.title = "A Terrible Day", the output would be: A Terrible...
244
Hope this helps :
{{ main.title | limitTo: 10 }}{{main.title.length > 10 ? '...' : ''}}
Well, if you want you can build a filter for this, but I would use ngIf directive, as 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>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's 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 view:
{{ model.longTextData | dotsFilter:10 }}
Use <span ng-class="{'ellipsis': text.length > limit}">{{text | limitTo:limit}}</span>
You need to define a css class .ellipsis:after{ content: '...'; } and a 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>As other answers using angularjs are already posted, I'm gonna give you a simple css technique to do it.
(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's 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>Someone reading in the future may consider using CSS instead of JS. Something like:
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div maxlength="59">
{{row.RequestTitle.length > 59 ? row.RequestTitle.substr(0,59) + '...' : row.RequestTitle}}
</div>
this is usefull and run also , Angular 5 Material UI
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
