Limitar la longitud de una cadena con AngularJS

Question

Limitar la longitud de una cadena con AngularJS

Tengo lo siguiente:

<div>{{modal.title}}</div>

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

Y una pregunta aún mejor sería ¿hay alguna manera de que pueda cambiar la cadena para que se trunque y mostrar ... al final si tiene más de 20 caracteres?

216

angularjs filter angularjs-filter

Author: Andrew Sula, 2013-08-07

Source

24 answers

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

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

480

Author: Govan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-09-17 13:49:26

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

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

Que producirá:

My String

57

Author: slim,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-05-09 14:42:17

Simplemente puede agregar una clase css al div, y agregar una punta de herramienta a través de angularjs para que el texto recortado sea visible al pasar el ratón por encima.

<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;
   }

50

Author: Sushrut,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-08-07 06:42:51

Tuve un problema similar, esto es lo que hice:

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

27

Author: crc442,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-03-10 18:59:05

Solución Más 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

17

Author: Anam,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-03-25 23:03:25

Dado que necesitamos puntos suspensivos solo cuando la longitud de la cadena está por encima del límite, parece más apropiado agregar puntos suspensivos usando ng-if que el enlace.

{{ longString | limitTo: 20 }}<span ng-if="longString.length > 20">&hellip;</span>

15

Author: mnishiguchi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-02-12 21:11:28

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

13

Author: Thiago Araújo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-15 07:38:47

Hay una opción

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

6

Author: Aleksandr Havrylov,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-29 09:49:37

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

4

Author: SharkAlley,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-11-01 08:59:02

Puede limitar la longitud de una cadena o una matriz utilizando un filtro. Compruebe este escrito por el equipo AngularJS.

3

Author: MAM,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-02-12 06:24:00

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

    <p> {{limitTo:30 | keepDots }} </p>

filtro keepDots :

     App.filter('keepDots' , keepDots)

       function keepDots() {

        return function(input,scope) {
            if(!input) return;

             if(input.length > 20)
                return input+'...';
            else
                return input;

        }


    }

3

Author: Shushanth Pallegar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-02-01 11:53:35

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

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

Antes: - /home/house/room/etc/ava_B0363852D549079E3720DF6680E17036.jar
Después de: - /home / hous...3720DF6680E17036.jar

3

Author: vhamon,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-10-05 13:21:40

La solución más simple que encontré para simplemente limitar la longitud de la cadena fue {{ modal.title | slice:0:20 }}, y luego tomando prestado de @Govan arriba puede usar {{ 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

3

Author: maudulus,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-05 21:36:38

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',[])

2

Author: Mohideen ibn Mohammed,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-12-08 12:55:38

Esto puede no ser del 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 en el mouseover. Puede agregar un texto más y agregar un hadler de clic angular 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;
    }

2

Author: Kurkula,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-02-11 19:23:11

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

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

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

Y aplica el filtro en tu app de esta manera:

{{ text | characters:20 }}

1

Author: charming mel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-11-26 14:11:14

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 ti. Concats la cadena y añade elipses además de que tiene la ventaja adicional de que le permite hacer clic en él para obtener el texto completo por lo que es toda la enchilada. Es posible que tenga que establecer el ancho de la 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
}

1

Author: Helzgate,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-02-16 16:30:30

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

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

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

1

Author: Harish Pothula,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-16 23:06:14

Creé esta directiva que hace eso fácilmente, trunca la cadena a un límite especificado y agrega un conmutador "mostrar más/menos". Puedes encontrarlo en GitHub: https://github.com/doukasd/AngularJS-Components

Se puede usar así:

<p data-dd-collapse-text="100">{{veryLongText}}</p>

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

Y algunos CSS para ir con él:

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

0

Author: Dimitris,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-08-07 14:52:55

Esta solución es puramente usando la etiqueta ng en HTML.

La solución es limitar el texto largo mostrado con ' mostrar más... enlace al final de la misma. Si el usuario hace clic en ' mostrar más...'enlace, se mostrará el resto del texto y eliminado el 'show más...' enlace.

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>

0

Author: Amirul,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-12-17 10:59:55

Limite el número de palabras con un filtro angular personalizado: Así es como usé un filtro Angular para limitar el número de palabras mostradas usando un filtro personalizado.

HTML:

<span>{{dataModelObject.TextValue | limitWordsTo: 38}} ......</span>

Angular / Código 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

0

Author: Geoff,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-01 18:52:26

Funciona bien para mí 'In span', ng-show = " MyCtrl.valor.view viewValue.length > your_limit" ...leer más. "end span"

0

Author: G. K.,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-12 05:33:31

Utilizo un buen conjunto de útiles biblioteca de filtros "Angular-filter" y uno de ellos llamado "truncate" también es útil.

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

El uso es:

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

0

Author: Lukas Jelinek,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-29 09:28:00

score 336 · Accepted Answer

Editar La última versión de AngularJS ofertas limitTo filter .

Necesitas 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 (boolean) - si es cierto, cortar solo por límites de palabras,
max (integer) - longitud máxima del texto, cortado a este número de caracteres,
tail (string, default:'...') - añade esta cadena a la entrada cadena si la cadena fue cortada.

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