Limiter la longueur d'une chaîne de caractères avec AngularJS

Question

J'ai les éléments suivants :

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

Existe-t-il un moyen de limiter la longueur de la chaîne à 20 caractères, par exemple ?

Et une question encore meilleure serait de savoir s'il existe un moyen de modifier la chaîne pour qu'elle soit tronquée et afficher ... à la fin s'il y a plus de 20 caractères ?

Answer 1

Voici la correction simple en une ligne sans css.

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

Answer 2

Modifier La dernière version de AngularJS offre limitTo filtre .

Vous avez besoin d'un filtre personnalisé comme ça :

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

Utilisation :

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

Options :

• wordwise (booléen) - si vrai, coupe seulement par les limites des mots,
• max (entier) - longueur maximale du texte, coupée à ce nombre de caractères,
• tail (chaîne, par défaut : ' ') - ajoute cette chaîne à la chaîne d'entrée d'entrée si la chaîne a été coupée.

Une autre solution : http://ngmodules.org/modules/angularjs-truncate (par @Ehvince)

Answer 3

Je sais que c'est un peu tard, mais dans la dernière version d'angularjs (j'utilise la 1.2.16), le filtre limitTo prend en charge les chaînes de caractères ainsi que les tableaux, de sorte que vous pouvez limiter la longueur de la chaîne de caractères comme ceci :

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

qui produira un résultat :

My String

Answer 4

Vous pouvez simplement ajouter une classe css à la division et ajouter une info-bulle via angularjs pour que le texte coupé soit visible au passage de la souris.

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

Vous pouvez limiter la longueur d'une chaîne ou d'un tableau en utilisant un filtre. Consultez celui-ci écrit par l'équipe AngularJS.