Eu tenho o seguinte:
<div>{{modal.title}}</div>Existe uma maneira de limitar o comprimento da string para dizer 20 caracteres?
E uma pergunta ainda melhor seria: existe uma maneira de alterar a string a ser truncada e mostrar ...no final se tiver mais de 20 caracteres?
Respostas:
Editar
A versão mais recente do filtro de AngularJSofertaslimitTo .
Você precisa de um filtro personalizado como este:
angular.module('ng').filter('cut', function () {
return function (value, wordwise, max, tail) {
if (!value) return '';
max = parseInt(max, 10);
if (!max) return value;
if (value.length <= max) return value;
value = value.substr(0, max);
if (wordwise) {
var lastspace = value.lastIndexOf(' ');
if (lastspace !== -1) {
//Also remove . and , so its gives a cleaner result.
if (value.charAt(lastspace-1) === '.' || value.charAt(lastspace-1) === ',') {
lastspace = lastspace - 1;
}
value = value.substr(0, lastspace);
}
}
return value + (tail || ' …');
};
});{{some_text | cut:true:100:' ...'}}Outra solução : http://ngmodules.org/modules/angularjs-truncate (por @Ehvince)
Aqui está a correção simples de uma linha sem css.
{{ myString | limitTo: 20 }}{{myString.length > 20 ? '...' : ''}}'...'você também pode usar a entidade HTML para reticências:'…'
Sei que está atrasado, mas na versão mais recente do angularjs (estou usando a 1.2.16), o filtro limitTo suporta seqüências de caracteres, bem como matrizes, para que você possa limitar o comprimento da sequência dessa maneira:
{{ "My String Is Too Long" | limitTo: 9 }}que produzirá:
My StringVocê pode simplesmente adicionar uma classe css à div e adicionar uma dica de ferramenta via angularjs para que o texto aparado fique visível ao passar o mouse.
<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; }
ng-repeat.
Eu tive um problema semelhante, aqui está o que eu fiz:
{{ longString | limitTo: 20 }} {{longString.length < 20 ? '' : '...'}}< div >{{modal.title | limitTo:20}}...< / div>Solução mais elegante:
HTML:
<html ng-app="phoneCat">
<body>
{{ "AngularJS string limit example" | strLimit: 20 }}
</body>
</html>Código angular:
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
inputvalor seja dinâmico? ie if (!input) {return;}Caso contrário, haverá erros de console JS
Como precisamos de reticências somente quando o comprimento da string estiver acima do limite, parece mais apropriado adicionar reticências usando do ng-ifque binding.
{{ longString | limitTo: 20 }}<span ng-if="longString.length > 20">…</span>Existe uma opção
.text {
max-width: 140px;
white-space: nowrap;
overflow: hidden;
padding: 5px;
text-overflow: ellipsis;(...)
}<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>A solução mais simples que encontrei para limitar o comprimento da string foi {{ modal.title | slice:0:20 }}e, depois, pedir emprestado ao @Govan acima, você pode {{ modal.title.length > 20 ? '...' : ''}}adicionar os pontos de suspensão se a string for maior que 20; portanto, o resultado final é simplesmente:
{{ modal.title | slice:0:20 }}{{ modal.title.length > 20 ? '...' : ''}}
https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html
Aqui está um filtro personalizado para truncar texto. É inspirado na solução do EpokK, mas modificado para minhas necessidades e gostos.
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 + '...';
};
});E aqui estão os testes de unidade para que você possa ver como ele deve se comportar:
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...");
});
});Em html é usado junto com o filtro limitTo fornecido pelo próprio angular como abaixo ,
<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;
}
}Se você quiser algo como: InputString => StringPart1 ... StringPart2
HTML:
<html ng-app="myApp">
<body>
{{ "AngularJS string limit example" | strLimit: 10 : 20 }}
</body>
</html>Código angular:
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) ;
};
}]);Exemplo com os seguintes parâmetros:
beginLimit = 10
endLimit = 20
Antes : - /home/house/room/etc/ava_B0363852D549079E3720DF6680E17036.jar
Depois : - /home/hous...3720DF6680E17036.jar
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',[])Isso pode não ser do final do script, mas você pode usar o css abaixo e adicionar esta classe à div. Isso truncará o texto e também mostrará o texto completo ao passar o mouse. Você pode adicionar mais texto e adicionar um hadler de clique angular para alterar a classe de div no cli
.ellipseContent {
overflow: hidden;
white-space: nowrap;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.ellipseContent:hover {
overflow: visible;
white-space: normal;
}Se você tem duas ligações {{item.name}}e {{item.directory}}.
E deseja mostrar os dados como um diretório seguido pelo nome, assumindo '/ root' como o diretório e 'Machine' como o nome (/ root-machine).
{{[item.directory]+[isLast ? '': '/'] + [ item.name] | limitTo:5}}Você pode usar este módulo npm: https://github.com/sparkalow/angular-truncate
Injete o filtro truncado no seu módulo de aplicativo da seguinte maneira:
var myApp = angular.module('myApp', ['truncate']); e aplique o filtro no seu aplicativo da seguinte maneira:
{{ text | characters:20 }} Eu criei essa diretiva que faz isso facilmente, trunca a string até um limite especificado e adiciona uma opção "mostrar mais / menos". Você pode encontrá-lo no GitHub: https://github.com/doukasd/AngularJS-Components
pode ser usado assim:
<p data-dd-collapse-text="100">{{veryLongText}}</p>Aqui está a diretiva:
// 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);
}
});
}
};
}]);E algum CSS para acompanhar:
.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: ')';
}Esta solução é puramente usando ng marca no HTML.
A solução é limitar o texto longo exibido com o link 'mostrar mais ...' no final. Se o usuário clicar no link 'mostrar mais ...', ele mostrará o restante do texto e removerá o link 'mostrar mais ...'.
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>A SOLUÇÃO MAIS FÁCIL -> que encontrei é deixar o Design de Materiais (1.0.0-rc4) fazer o trabalho. O md-input-containerfará o trabalho para você. Concatiza a string e adiciona elipses, além de ter a vantagem extra de permitir que você clique nela para obter o texto completo, para que fique toda preenchida. Pode ser necessário definir a largura do 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
}Limitar o número de palavras com um filtro Angular personalizado: Aqui está como eu usei um filtro Angular para limitar o número de palavras exibidas usando um filtro personalizado.
HTML:
<span>{{dataModelObject.TextValue | limitWordsTo: 38}} ......</span>Código Angular / Javascript
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 filterEu uso um bom conjunto de bibliotecas de filtros úteis "Angular-filter" e uma delas chamada "truncate" também é útil.
https://github.com/a8m/angular-filter#truncate
o uso é:
text | truncate: [length]: [suffix]: [preserve-boolean]