begin - Limita la longitud de una cuerda con AngularJS

limitto angularjs

Question

Tengo los siguientes

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

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

Y una pregunta aún mejor sería si hay una forma en que podría cambiar la cadena a truncar y mostrar ... al final si tiene más de 20 caracteres?

Answer 1

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

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

Answer 2

Aquí hay un filtro personalizado para truncar el 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 puedas ver cómo se supone que se comporta:

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

Answer 3

Creé esta directiva que fácilmente hace eso, trunca la cadena a un límite específico y agrega un interruptor "mostrar más / menos". Lo puedes encontrar 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 algo de CSS para acompañarlo:

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

Answer 4

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

La solución es limitar el texto largo que se muestra con el enlace ''mostrar más ...'' al final. Si el usuario hace clic en el enlace ''mostrar más ...'', mostrará el resto del texto y eliminará el enlace ''mostrar más ...''.

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>

Answer 5

Funciona bien para mí ''In span'', ng-show = "MyCtrl.value. $ ViewValue.length> your_limit" ... lea más. ''tramo final''

Answer 6

Hay una opcion

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

Answer 7

LA SOLUCIÓN MÁS FÁCIL -> Lo que encontré es dejar que Material Design (1.0.0-rc4) haga el trabajo. El md-input-container hará el trabajo por usted. Acumula la cadena y agrega puntos suspensivos, además tiene la ventaja adicional de permitirte hacer clic en ella para obtener el texto completo, de modo que es toda la enchilada. Es posible que deba establecer el ancho del 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
}

Answer 8

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

Answer 9

Puede que no sea del final del script, pero puede usar el css a continuación y agregar esta clase al div. Esto truncará el texto y también mostrará el texto completo al pasar el mouse. Puede agregar un texto más y agregar un clic angular de 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;
    }

Answer 10

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 esta manera:

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

y aplique el filtro en su aplicación de esta manera:

{{ text | characters:20 }} 

Answer 11

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

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

que dará salida:

My String

Answer 12

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 de : --home / house / room / etc / ava_B0363852D549079E3720DF6680E17036.jar
Después : --home / hous ... 3720DF6680E17036.jar

Answer 13

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

Answer 14

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

Answer 15

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

Manifestación:

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

Answer 16

Tuve un problema similar, esto es lo que hice:

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

Answer 17

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

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

Answer 18

Yo uso un buen conjunto de filtros útiles "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]

Answer 19

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

Answer 20

En html se usa junto con el filtro limitto proporcionado por el propio ángulo 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;

        }


    }

Answer 21

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

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 (booleano): si es verdadero, corte solo por los límites de las palabras,
• max (entero) - longitud máxima del texto, corte a este número de caracteres,
• cola (cadena, valor predeterminado: ''...''): agregue esta cadena a la cadena de entrada si se cortó la cadena.

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

Answer 22

Limite el número de palabras con un filtro Angular personalizado: Aquí es cómo usé un filtro Angular para limitar el número de palabras mostradas usando un 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 filter

Answer 23

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

Answer 24

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