Limite la longitud de una cuerda con AngularJS

Tengo lo siguiente:

{{modal.title}}

¿Hay alguna manera de que pueda limitar la longitud de la cadena para decir 20 caracteres?

Y una pregunta aún mejor sería si hubiera alguna manera de cambiar la cadena que se truncará y mostrar ... al final si son más de 20 caracteres?

Editar La última versión de AngularJS ofrece el filtro limitTo .

Necesita un 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:' ...'}} 

Opciones:

  • wordwise (booleano) - si es verdadero, corte solo por límites de palabras,
  • max (integer): longitud máxima del texto, corte a esta cantidad de caracteres,
  • tail (cadena, por defecto: '...') - agrega esta cadena a la cadena de entrada si la cadena fue cortada.

Otra solución : http://ngmodules.org/modules/angularjs-truncate (por @Ehvince)

Aquí está la solución simple de una línea sin CSS.

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

Sé que esto es tarde, pero en la última versión de angularjs (estoy usando 1.2.16), el filtro de límite admite cadenas así como matrices para que pueda limitar la longitud de la cadena de esta manera:

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

que dará salida:

 My String 

Simplemente puede agregar una clase css al div y agregar una información sobre herramientas a través de angularjs para que el texto recortado sea visible al pasar el mouse.

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

Tuve un problema similar, esto es lo que hice:

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

Una solución más 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) + '...'; }; }]); 

Manifestación:

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

Como necesitamos elipsis solo cuando la longitud de la cuerda excede el límite, parece más apropiado agregar puntos suspensivos usando ng-if que unión.

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

Hay una opción

 .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.

Aquí hay un filtro personalizado para truncar texto. Está inspirado en la solución de EpokK pero modificado para mis necesidades y gustos.

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

Y aquí están las pruebas unitarias para que pueda ver cómo se supone que debe comportarse:

 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..."); }); }); 

Puede limitar la longitud de una cadena o una matriz mediante el uso de un filtro. Mira este escrito por el equipo de AngularJS.

En html se usa junto con el filtro limitTo proporcionado por el propio angular como se muestra a continuación ,

  

{{limitTo:30 | keepDots }}

filtro keepDots:

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

Si quieres 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) ; }; }]); 

Ejemplo con los siguientes parámetros:
beginLimit = 10
endLimit = 20

Antes : - /home/house/room/etc/ava_B0363852D549079E3720DF6680E17036.jar
Después : - /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',[]) 

Puede que no sea desde el final del script, pero puede usar el siguiente css y agregar esta clase al div. Esto truncará el texto y también mostrará el texto completo al pasar el ratón sobre él. Puede agregar más texto y agregar un clic angular hadler para cambiar la clase de div en cli

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

La solución más simple que encontré para limitar la longitud de la cadena fue {{ modal.title | slice:0:20 }} {{ modal.title | slice:0:20 }} , y luego tomar prestado de @Govan arriba puedes usar {{ modal.title.length > 20 ? '...' : ''}} {{ modal.title.length > 20 ? '...' : ''}} para agregar los puntos de suspensión si la cadena es más larga que 20, por lo que el resultado final es simplemente:

{{ modal.title | slice:0:20 }}{{ modal.title.length > 20 ? '...' : ''}}

https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html

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

Inyecte el filtro truncado en su módulo de aplicación de esta manera:

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

y aplica el filtro en tu aplicación de esta manera:

 {{ text | characters:20 }} 

LA SOLUCIÓN MÁS FÁCIL -> que he encontrado es dejar que Material Design (1.0.0-rc4) haga el trabajo. El md-input-container hará el trabajo por usted. Concatena la cuerda y agrega elipses, además tiene la ventaja adicional de permitirte hacer clic para obtener el texto completo, así que es toda la enchilada. Es posible que deba establecer el ancho del 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 } 

Si tiene dos enlaces {{item.name}} y {{item.directory}} .

Y desea mostrar los datos como un directorio seguido del nombre, asumiendo ‘/ root’ como el directorio y ‘Machine’ como el nombre (/ root-machine).

 {{[item.directory]+[isLast ? '': '/'] + [ item.name] | limitTo:5}} 

Creé esta directiva que hace eso fácilmente, trunca la cadena a un límite específico y agrega un alternar “mostrar más / menos”. Puede encontrarlo en GitHub: https://github.com/doukasd/AngularJS-Components

se puede usar así:

 

{{veryLongText}}

Aquí está la directiva:

 // 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); } }); } }; }]); 

Y algo de CSS para ir con eso:

 .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 solución es puramente usar ng tag en HTML.

La solución es limitar el texto largo que se muestra con el enlace ‘mostrar más …’ al final del mismo. Si el usuario hace clic en el vínculo “mostrar más …”, se mostrará el rest del texto y se eliminará el enlace “mostrar más …”.

HTML:

 

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

Limite el número de palabras con un filtro angular personalizado: así es como utilicé un filtro angular para limitar el número de palabras que se muestran con un 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 

Funciona bien para mí ‘In span’, ng-show = “MyCtrl.value. $ ViewValue.length> your_limit” … leer más. ‘lapso final’

Utilizo un buen conjunto de biblioteca de filtros útil “Filtro angular” y uno de ellos llamado “truncar” también es útil.

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

el uso es:

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