Limite o comprimento de uma string com o AngularJS

Eu tenho o seguinte:

{{modal.title}}

Existe uma maneira que eu poderia limitar o comprimento da string para dizer 20 caracteres?

E uma pergunta ainda melhor seria se há uma maneira de alterar a string para ser truncada e mostrar ... no final, se tiver mais de 20 caracteres?

Editar A versão mais recente do AngularJS oferece filtro limitTo .

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 || ' …'); }; }); 

Uso:

 {{some_text | cut:true:100:' ...'}} 

Opções:

  • wordwise (booleano) - se for verdade, corte apenas por palavras,
  • max (integer) - duração máxima do texto, corte para este número de caracteres,
  • tail (string, default: '…') - adicione esta string à string de input se a string foi cortada.

Outra solução : http://ngmodules.org/modules/angularjs-truncate (by @Ehvince)

Aqui está a simples correção de uma linha sem css.

 {{ myString | limitTo: 20 }}{{myString.length > 20 ? '...' : ''}} 

Eu sei que isso é tarde, mas na versão mais recente do angularjs (estou usando 1.2.16), o filtro limitTo suporta strings, bem como arrays, para que você possa limitar o comprimento da string da seguinte forma:

 {{ "My String Is Too Long" | limitTo: 9 }} 

qual produzirá:

 My String 

Você pode simplesmente adicionar uma class css ao div e adicionar uma dica de ferramenta via angularjs para que o texto recortado fique visível ao passar o mouse.

 
{{modal.title}}
.trim-info { max-width: 50px; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 15px; position: relative; }

Eu tive um problema semelhante, aqui está o que eu fiz:

 {{ longString | limitTo: 20 }} {{longString.length < 20 ? '' : '...'}} 

Solução mais elegante:

HTML:

   {{ "AngularJS string limit example" | strLimit: 20 }}   

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) + '...'; }; }]); 

Demonstração:

http://code-chunk.com/chunks/547bfb3f15aa1/str-limit-implementation-for-angularjs

Como precisamos de reticências apenas quando o tamanho da string estiver acima do limite, parece mais apropriado adicionar reticências usando ng-if que binding.

 {{ longString | limitTo: 20 }} 
 < div >{{modal.title | limitTo:20}}...< / div> 

Existe uma opção

 .text { max-width: 140px; white-space: nowrap; overflow: hidden; padding: 5px; text-overflow: ellipsis;(...) } 
 
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.

Aqui está um filtro personalizado para truncar o texto. É inspirado pela solução do EpokK, mas modificado para as 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 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..."); }); }); 

Você pode limitar o tamanho de uma string ou uma matriz usando um filtro. Confira este escrito pela equipe do AngularJS.

Em html é usado junto com o filtro limitTo fornecido pelo próprio angular como abaixo ,

  

{{limitTo:30 | keepDots }}

keepDots do filtro:

  App.filter('keepDots' , keepDots) function keepDots() { return function(input,scope) { if(!input) return; if(input.length > 20) return input+'...'; else return input; } } 

Se você quer algo como: InputString => StringPart1StringPart2

HTML:

   {{ "AngularJS string limit example" | strLimit: 10 : 20 }}   

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 essa class ao div. Isso truncará o texto e também mostrará o texto completo no mouseover. Você pode adicionar mais texto e adicionar um hadler de clique angular para alterar a class de div no cli

 .ellipseContent { overflow: hidden; white-space: nowrap; -ms-text-overflow: ellipsis; text-overflow: ellipsis; } .ellipseContent:hover { overflow: visible; white-space: normal; } 

A solução mais simples que encontrei para simplesmente limitar o tamanho da string foi {{ modal.title | slice:0:20 }} {{ modal.title | slice:0:20 }} , e depois pegando emprestado do @Govan acima, você pode usar o {{ modal.title.length > 20 ? '...' : ''}} {{ modal.title.length > 20 ? '...' : ''}} para adicionar os pontos de suspensão se a string for maior que 20, então 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

Você pode usar este módulo npm: https://github.com/sparkalow/angular-truncate

Injete o filtro truncado no seu módulo de aplicativo assim:

 var myApp = angular.module('myApp', ['truncate']); 

e aplique o filtro em seu aplicativo desta maneira:

 {{ text | characters:20 }} 

A SOLUÇÃO MAIS FÁCIL -> eu descobri é deixar o Material Design (1.0.0-rc4) fazer o trabalho. O md-input-container fará o trabalho para você. Ele concats a string e adiciona elipses mais tem a vantagem extra de permitir que você clique nele para obter o texto completo por isso é toda a enchilada. Pode ser necessário definir a largura do md-input-container .

HTML:

   {{mytext}}    

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 } 

Se você tiver duas ligações {{item.name}} e {{item.directory}} .

E quer 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}} 

Eu criei essa diretiva que facilmente faz isso, trunca a string para um limite especificado e adiciona um toggle “show more / less”. Você pode encontrá-lo no GitHub: https://github.com/doukasd/AngularJS-Components

pode ser usado assim:

 

{{veryLongText}}

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('' + firstPart + '')(scope); var secondSpan = $compile('' + secondPart + '')(scope); var moreIndicatorSpan = $compile('...')(scope); var toggleButton = $compile('{{collapsed ? "less" : "more"}}')(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 tag em HTML.

A solução é limitar o texto longo exibido com o link “mostrar mais …” no final dele. Se o usuário clicar no link “mostrar mais …”, ele mostrará o restante do texto e removerá o link “mostrar mais …”.

HTML:

 

{{ veryLongText | limitTo: limitText }} show more..

Limite 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:

 {{dataModelObject.TextValue | limitWordsTo: 38}} ...... 

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 filter 

Ele funciona bem para mim ‘No intervalo’, ng-show = “MyCtrl.value. $ ViewValue.length> your_limit” … leia mais. ‘end span’

Eu uso um bom conjunto de biblioteca de filtros úteis “Angular-filter” e um deles chamado “truncate” também é útil.

https://github.com/a8m/angular-filter#truncate

o uso é:

 text | truncate: [length]: [suffix]: [preserve-boolean]