I have the following:
<div>{{modal.title}}</div>
Is there a way that I could limit the length of the string to say 20 characters?
And an even better question would be is there a way that I could change the string to be truncated and show ... at the end if it's more than 20 characters?
This question is related to
angularjs
filter
angularjs-filter
< div >{{modal.title | limitTo:20}}...< / div>
You can simply add a css class to the div, and add a tool tip via angularjs so that trimmed text will be visible on mouse over.
<div class="trim-info" tooltip="{{modal.title}}">{{modal.title}}</div> .trim-info { max-width: 50px; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 15px; position: relative; }
I use nice set of useful filter library "Angular-filter" and one of them called "truncate" is useful too.
https://github.com/a8m/angular-filter#truncate
usage is:
text | truncate: [length]: [suffix]: [preserve-boolean]
In html its used along with limitTo filter provided by angular itself as below,
<p> {{limitTo:30 | keepDots }} </p>
filter keepDots :
App.filter('keepDots' , keepDots)
function keepDots() {
return function(input,scope) {
if(!input) return;
if(input.length > 20)
return input+'...';
else
return input;
}
}
THE EASIEST SOLUTION --> i've found is to let Material Design (1.0.0-rc4) do the work. The md-input-container will do the work for you. It concats the string and adds elipses plus it has the extra advantage of allowing you to click it to get the full text so it's the whole enchilada. You may need to set the width of the md-input-container.
HTML:
<md-input-container>
<md-select id="concat-title" placeholder="{{mytext}}" ng-model="mytext" aria-label="label">
<md-option ng-selected="mytext" >{{mytext}}
</md-option>
</md-select>
</md-input-container>
CS:
#concat-title .md-select-value .md-select-icon{
display: none; //if you want to show chevron remove this
}
#concat-title .md-select-value{
border-bottom: none; //if you want to show underline remove this
}
If you want something like : InputString => StringPart1...StringPart2
HTML:
<html ng-app="myApp">
<body>
{{ "AngularJS string limit example" | strLimit: 10 : 20 }}
</body>
</html>
Angular Code:
var myApp = angular.module('myApp', []);
myApp.filter('strLimit', ['$filter', function($filter) {
return function(input, beginlimit, endlimit) {
if (! input) return;
if (input.length <= beginlimit + endlimit) {
return input;
}
return $filter('limitTo')(input, beginlimit) + '...' + $filter('limitTo')(input, -endlimit) ;
};
}]);
Example with following parameters :
beginLimit = 10
endLimit = 20
Before:
- /home/house/room/etc/ava_B0363852D549079E3720DF6680E17036.jar
After:
- /home/hous...3720DF6680E17036.jar
If you have two bindings {{item.name}} and {{item.directory}}.
And want to show the data as a directory followed by the name, assuming '/root' as the directory and 'Machine' as the name (/root-machine).
{{[item.directory]+[isLast ? '': '/'] + [ item.name] | limitTo:5}}
I know this is late, but in the latest version of angularjs (I'm using 1.2.16) the limitTo filter supports strings as well as arrays so you can limit the length of the string like this:
{{ "My String Is Too Long" | limitTo: 9 }}
which will output:
My String
<div>{{modal.title | slice: 0: 20}}</div>
Limit the number of words with a custom Angular filter: Here is how I used an Angular filter to limit the number of words displayed using a custom filter.
HTML:
<span>{{dataModelObject.TextValue | limitWordsTo: 38}} ......</span>
Angular/Javascript Code
angular.module('app')
.filter('limitWordsTo', function () {
return function (stringData, numberOfWords) {
//Get array of words (determined by spaces between words)
var arrayOfWords = stringData.split(" ");
//Get loop limit
var loopLimit = numberOfWords > arrayOfWords.length ? arrayOfWords.length : numberOfWords;
//Create variables to hold limited word string and array iterator
var limitedString = '', i;
//Create limited string bounded by limit passed in
for (i = 0; i < loopLimit; i++) {
if (i === 0) {
limitedString = arrayOfWords[i];
} else {
limitedString = limitedString + ' ' + arrayOfWords[i];
}
}
return limitedString;
};
}); //End filter
It works ok for me 'In span', ng-show = "MyCtrl.value.$viewValue.length > your_limit" ...read more. 'end span'
You can limit the length of a string or an array by using a filter. Check this one written by the AngularJS team.
Here is the simple one line fix without css.
{{ myString | limitTo: 20 }}{{myString.length > 20 ? '...' : ''}}
This may not be from the script end but you can use the below css and add this class to the div. This will truncate the text and also show full text on mouseover. You can add a more text and add a angular click hadler to change the class of div on cli
.ellipseContent {
overflow: hidden;
white-space: nowrap;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.ellipseContent:hover {
overflow: visible;
white-space: normal;
}
There is an option
.text {_x000D_
max-width: 140px;_x000D_
white-space: nowrap;_x000D_
overflow: hidden;_x000D_
padding: 5px;_x000D_
text-overflow: ellipsis;(...)_x000D_
}<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi qui soluta labore! Facere nisi aperiam sequi dolores voluptatum delectus vel vero animi, commodi harum molestias deleniti, quasi nesciunt. Distinctio veniam minus ut vero rerum debitis placeat veritatis doloremque laborum optio, nemo quibusdam ad, sed cum quas maxime hic enim sint at quos cupiditate qui eius quam tempora. Ab sint in sunt consequuntur assumenda ratione voluptates dicta dolor aliquid at esse quaerat ea, veritatis reiciendis, labore repellendus rem optio debitis illum! Eos dignissimos, atque possimus, voluptatibus similique error. Perferendis error doloribus harum enim dolorem, suscipit unde vel, totam in quia mollitia.</div>The simplest solution I found for simply limiting the string length was {{ modal.title | slice:0:20 }}, and then borrowing from @Govan above you can use {{ modal.title.length > 20 ? '...' : ''}} to add the suspension points if the string is longer than 20, so the final result is simply:
{{ modal.title | slice:0:20 }}{{ modal.title.length > 20 ? '...' : ''}}
https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html
You can use this npm module: https://github.com/sparkalow/angular-truncate
Inject the truncate filter into your app module like this:
var myApp = angular.module('myApp', ['truncate']);
and apply the filter in your app this way:
{{ text | characters:20 }}
I would use the following a ternary operator alternative to accomplish the truncation with ... as follow:
<div>{{ modal.title.length > 20 ? (modal.title | limitTo : 20) + '...' : modal.title }}</div>
Since we need ellipsis only when the string length is over the limit, it seems more appropriate to add ellipsis by using ng-if than binding.
{{ longString | limitTo: 20 }}<span ng-if="longString.length > 20">…</span>
More elegant solution:
HTML:
<html ng-app="phoneCat">
<body>
{{ "AngularJS string limit example" | strLimit: 20 }}
</body>
</html>
Angular Code:
var phoneCat = angular.module('phoneCat', []);
phoneCat.filter('strLimit', ['$filter', function($filter) {
return function(input, limit) {
if (! input) return;
if (input.length <= limit) {
return input;
}
return $filter('limitTo')(input, limit) + '...';
};
}]);
Demo:
http://code-chunk.com/chunks/547bfb3f15aa1/str-limit-implementation-for-angularjs
I had a similar problem, here is what i did:
{{ longString | limitTo: 20 }} {{longString.length < 20 ? '' : '...'}}
This solution is purely using ng tag on HTML.
The solution is to limit the long text displayed with 'show more...' link at the end of it. If user click 'show more...' link, it will show the rest of the text and removed the 'show more...' link.
HTML:
<div ng-init="limitText=160">
<p>{{ veryLongText | limitTo: limitText }}
<a href="javascript:void(0)"
ng-hide="veryLongText.length < limitText"
ng-click="limitText = veryLongText.length + 1" > show more..
</a>
</p>
</div>
I created this directive that easily does that, truncates the string to a specified limit and adds a "show more/less" toggle. You can find it on GitHub: https://github.com/doukasd/AngularJS-Components
it can be used like this:
<p data-dd-collapse-text="100">{{veryLongText}}</p>
Here's the directive:
// a directive to auto-collapse long text
app.directive('ddCollapseText', ['$compile', function($compile) {
return {
restrict: 'A',
replace: true,
link: function(scope, element, attrs) {
// start collapsed
scope.collapsed = false;
// create the function to toggle the collapse
scope.toggle = function() {
scope.collapsed = !scope.collapsed;
};
// get the value of the dd-collapse-text attribute
attrs.$observe('ddCollapseText', function(maxLength) {
// get the contents of the element
var text = element.text();
if (text.length > maxLength) {
// split the text in two parts, the first always showing
var firstPart = String(text).substring(0, maxLength);
var secondPart = String(text).substring(maxLength, text.length);
// create some new html elements to hold the separate info
var firstSpan = $compile('<span>' + firstPart + '</span>')(scope);
var secondSpan = $compile('<span ng-if="collapsed">' + secondPart + '</span>')(scope);
var moreIndicatorSpan = $compile('<span ng-if="!collapsed">...</span>')(scope);
var toggleButton = $compile('<span class="collapse-text-toggle" ng-click="toggle()">{{collapsed ? "less" : "more"}}</span>')(scope);
// remove the current contents of the element
// and add the new ones we created
element.empty();
element.append(firstSpan);
element.append(secondSpan);
element.append(moreIndicatorSpan);
element.append(toggleButton);
}
});
}
};
}]);
And some CSS to go with it:
.collapse-text-toggle {
font-size: 0.9em;
color: #666666;
cursor: pointer;
}
.collapse-text-toggle:hover {
color: #222222;
}
.collapse-text-toggle:before {
content: '\00a0(';
}
.collapse-text-toggle:after {
content: ')';
}
Here's a custom filter for truncating text. It's inspired by EpokK's solution but modified for my needs and tastes.
angular.module('app').filter('truncate', function () {
return function (content, maxCharacters) {
if (content == null) return "";
content = "" + content;
content = content.trim();
if (content.length <= maxCharacters) return content;
content = content.substring(0, maxCharacters);
var lastSpace = content.lastIndexOf(" ");
if (lastSpace > -1) content = content.substr(0, lastSpace);
return content + '...';
};
});
And here are the unit tests so you can see how it's supposed to behave:
describe('truncate filter', function () {
var truncate,
unfiltered = " one two three four ";
beforeEach(function () {
module('app');
inject(function ($filter) {
truncate = $filter('truncate');
});
});
it('should be defined', function () {
expect(truncate).to.be.ok;
});
it('should return an object', function () {
expect(truncate(unfiltered, 0)).to.be.ok;
});
it('should remove leading and trailing whitespace', function () {
expect(truncate(unfiltered, 100)).to.equal("one two three four");
});
it('should truncate to length and add an ellipsis', function () {
expect(truncate(unfiltered, 3)).to.equal("one...");
});
it('should round to word boundaries', function () {
expect(truncate(unfiltered, 10)).to.equal("one two...");
});
it('should split a word to avoid returning an empty string', function () {
expect(truncate(unfiltered, 2)).to.equal("on...");
});
it('should tolerate non string inputs', function () {
expect(truncate(434578932, 4)).to.equal("4345...");
});
it('should tolerate falsey inputs', function () {
expect(truncate(0, 4)).to.equal("0");
expect(truncate(false, 4)).to.equal("fals...");
});
});
Use this in your html - {{value | limitTocustom:30 }}
and write this custom filter in your angular file,
app.filter('limitTocustom', function() {
'use strict';
return function(input, limit) {
if (input) {
if (limit > input.length) {
return input.slice(0, limit);
} else {
return input.slice(0, limit) + '...';
}
}
};
});
// if you initiate app name by variable app. eg: var app = angular.module('appname',[])
Source: Stackoverflow.com