Limite la longueur D'une corde avec AngularJS

j'ai le suivant:

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

y a-t-il un moyen de limiter la longueur de la chaîne à 20 caractères?

et une question encore meilleure serait s'il y avait un moyen que je puisse changer la chaîne à tronquer et afficher ... à la fin si elle est de plus de 20 caractères?

216
demandé sur Andrew Sula 2013-08-07 10:00:45

24 réponses

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

vous avez besoin d'un filtre personnalisé comme ceci:

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 (boolean) - si la valeur est true, coupé seulement par des mots, des limites, des
  • max (entier) - Longueur max du texte, coupé à ce nombre de chars,
  • queue (string, default: '...') - ajouter cette corde à l'entrée ficelle si la ficelle a été coupée.

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

336
répondu EpokK 2017-03-06 12:41:16

Voici la solution simple d'une ligne sans css.

{{ myString | limitTo: 20 }}{{myString.length > 20 ? '...' : ''}}
480
répondu Govan 2014-09-17 13:49:26

je sais que c'est en retard, mais dans la dernière version d'angularjs (j'utilise 1.2.16) la limitTo filter supporte les chaînes ainsi que les tableaux de sorte que vous pouvez limiter la longueur de la chaîne comme ceci:

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

qui sortira:

My String
57
répondu slim 2014-05-09 14:42:17

vous pouvez simplement ajouter une classe css au div, et ajouter une astuce d'outil via angularjs de sorte que le texte tronqué sera visible sur 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;
   }
50
répondu Sushrut 2013-08-07 06:42:51

j'ai eu un problème similaire, voici ce que j'ai fait:

{{ longString | limitTo: 20 }} {{longString.length < 20 ? '' : '...'}}
27
répondu crc442 2015-03-10 18:59:05

solution plus élégante:

HTML:

<html ng-app="phoneCat">
  <body>
    {{ "AngularJS string limit example" | strLimit: 20 }}
  </body>
</html>

Code Angulaire:

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

Démo:

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

17
répondu Anam 2015-03-25 23:03:25

puisque nous n'avons besoin d'ellipses que lorsque la longueur de la chaîne dépasse la limite, il semble plus approprié d'ajouter des ellipses en utilisant ng-if que la liaison.

{{ longString | limitTo: 20 }}<span ng-if="longString.length > 20">&hellip;</span>
15
répondu mnishiguchi 2016-02-12 21:11:28
< div >{{modal.title | limitTo:20}}...< / div>
13
répondu Thiago Araújo 2017-03-15 07:38:47

il y a une option

.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
répondu Aleksandr Havrylov 2016-08-29 09:49:37

Voici un filtre personnalisé pour tronquer le texte. Il est inspiré de la solution D'EpokK mais modifié pour mes besoins et mes goûts.

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

et voici les tests unitaires pour voir comment il est censé se comporter:

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
répondu SharkAlley 2014-11-01 08:59:02

vous pouvez limiter la longueur d'une chaîne ou d'un tableau en utilisant un filtre. Cochez celle-ci écrite par L'équipe AngularJS.

3
répondu MAM 2014-02-12 06:24:00

en html its utilisé avec limitTo filter fourni par angular itself comme ci-dessous ,

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

keepDots de filtre:

     App.filter('keepDots' , keepDots)

       function keepDots() {

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

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

        }


    }
3
répondu Shushanth Pallegar 2015-02-01 11:53:35

si vous voulez quelque chose comme: InputString = > StringPart1 ... StringPart2

HTML:

<html ng-app="myApp">
  <body>
    {{ "AngularJS string limit example" | strLimit: 10 : 20 }}
  </body>
</html>

Code Angulaire:

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

exemple avec les paramètres suivants:

beginLimit = 10

endLimit = 20

avant : - /home/maison/chambre/etc/ava_B0363852D549079E3720DF6680E17036.jar

après : - /home / hous...3720DF6680E17036.jar

3
répondu vhamon 2016-10-05 13:21:40

la solution la plus simple que j'ai trouvée pour limiter simplement la longueur de la chaîne était {{ modal.title | slice:0:20 }} , et puis en empruntant à @Govan ci-dessus vous pouvez utiliser {{ modal.title.length > 20 ? '...' : ''}} pour ajouter les points de suspension si la chaîne est plus longue que 20, donc le résultat final est simplement:

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

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

3
répondu maudulus 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
répondu Mohideen ibn Mohammed 2015-12-08 12:55:38

cela ne vient peut-être pas de la fin du script, mais vous pouvez utiliser les css ci-dessous et ajouter cette classe au div. Ceci tronquera le texte et montrera aussi le texte complet sur mouseover. Vous pouvez ajouter un plus de texte et Ajouter un clic angulaire hadler pour changer la classe de div sur cli

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

    .ellipseContent:hover {
        overflow: visible;
        white-space: normal;
    }
2
répondu Kurkula 2016-02-11 19:23:11

vous pouvez utiliser ce module npm: https://github.com/sparkalow/angular-truncate

injectez le filtre tronqué dans votre module app comme ceci:

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

et appliquer le filtre dans votre application de cette façon:

{{ text | characters:20 }} 
1
répondu charming mel 2015-11-26 14:11:14

la SOLUTION la plus facile --> j'ai trouvé est de laisser la conception du matériau (1.0.0-rc4) faire le travail. Le md-input-container fera le travail pour vous. Il concat la corde et ajoute des elipses plus il a l'avantage supplémentaire de vous permettre de cliquer dessus pour obtenir le texte complet ainsi c'est l'enchilada entière. Vous aurez peut-être besoin de définir la largeur du 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
répondu Helzgate 2016-02-16 16:30:30

si vous avez deux reliures {{item.name}} et {{item.directory}} .

et veulent montrer les données comme un répertoire suivi du nom, en supposant '/root' comme le répertoire et 'Machine' comme le nom (/root-machine).

{{[item.directory]+[isLast ? '': '/'] + [ item.name]  | limitTo:5}}
1
répondu Harish Pothula 2017-08-16 23:06:14

j'ai créé cette directive qui fait facilement cela, tronque la chaîne à une limite spécifiée et ajoute une bascule" show more/less". Vous pouvez le trouver sur GitHub: https://github.com/doukasd/AngularJS-Components

il peut être utilisé comme ceci:

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

Voici la directive:

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

Et un peu de CSS pour aller avec elle:

.collapse-text-toggle {
font-size: 0.9em;
color: #666666;
cursor: pointer;
}
.collapse-text-toggle:hover {
color: #222222;
}
.collapse-text-toggle:before {
content: '"151920920"a0(';
}
.collapse-text-toggle:after {
content: ')';
}
0
répondu Dimitris 2014-08-07 14:52:55

cette solution utilise uniquement la balise ng sur HTML.

la solution est de limiter le long texte affiché avec 'show more... lien à la fin de celui-ci. Si l'utilisateur clique sur ' Afficher plus... lien, il va montrer le reste du texte, et supprimé le 'en montrer plus...' lien.

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
répondu Amirul 2015-12-17 10:59:55

limiter le nombre de mots avec un filtre angulaire personnalisé: Voici comment j'ai utilisé un filtre angulaire pour limiter le nombre de mots affichés en utilisant un filtre personnalisé.

HTML:

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

Angulaire/Code 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
répondu Geoff 2016-06-01 18:52:26

ça marche pour moi 'In span', ng-show = "MyCtrl.valeur.$ viewValue.longueur > your_limit" ...lire la suite. 'fin span'

0
répondu G. K. 2016-08-12 05:33:31

j'utilise un bel ensemble de bibliothèque de filtres utiles" Angular-filter "et l'un d'eux appelé" truncate " est également utile.

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

usage:

text | truncate: [length]: [suffix]: [preserve-boolean]
0
répondu Lukas Jelinek 2017-09-29 09:28:00