Limiter la longueur d’une chaîne avec AngularJS

Modifier La dernière version d’ AngularJS offre limitTo filtre limitTo .

Vous avez besoin d’un filtre personnalisé comme celui-ci:

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

Usage:

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

Options:

• wordwise (boolean) - si true, coupé seulement par des mots,
• max (entier) - longueur maximale du texte, coupée à ce nombre de caractères,
• tail (ssortingng, default: '…') - ajoute cette chaîne à la chaîne d'entrée si la chaîne a été coupée.

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

Voici la solution simple sans css.

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

Je sais que c’est en retard, mais dans la dernière version d’angularjs (j’utilise 1.2.16), le filtre limitTo supporte les chaînes ainsi que les tableaux, vous pouvez ainsi limiter la longueur de la chaîne:

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

qui produira:

 My Ssortingng 

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

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

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

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

Solution plus élégante:

HTML:

   {{ "AngularJS ssortingng limit example" | strLimit: 20 }}   

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

Démo:

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

Comme nous avons besoin de points de suspension uniquement lorsque la longueur de la chaîne dépasse la limite, il semble plus approprié d’append des points de suspension en utilisant ng-if plutôt que la liaison.

 {{ longSsortingng | limitTo: 20 }}… 

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

Il y a une option

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

Voici un filtre personnalisé pour tronquer le texte. Il s’inspire de la solution d’EpokK mais a été adapté à mes besoins et à mes goûts.

 angular.module('app').filter('truncate', function () { return function (content, maxCharacters) { if (content == null) return ""; content = "" + content; content = content.sortingm(); 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 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 ssortingng', function () { expect(truncate(unfiltered, 2)).to.equal("on..."); }); it('should tolerate non ssortingng 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..."); }); }); 

Vous pouvez limiter la longueur d’une chaîne ou d’un tableau à l’aide d’un filtre. Cochez celle-ci écrite par l’équipe AngularJS.

En html son utilisé avec limitTo filtre fourni par angular lui-même comme ci – dessous ,

  
 {{limitTo:30 | keepDots }}  

filter keepDots:

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

Si vous voulez quelque chose comme: InputSsortingng => SsortingngPart1 … SsortingngPart2

HTML:

   {{ "AngularJS ssortingng limit example" | strLimit: 10 : 20 }}   

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

Exemple avec les parameters suivants:
beginLimit = 10
endLimit = 20

Avant : - /home/house/room/etc/ava_B0363852D549079E3720DF6680E17036.jar
Aprè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 ssortingct'; 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',[]) 

Cela ne vient peut-être pas de la fin du script mais vous pouvez utiliser le css ci-dessous et append cette classe au div. Cela tronquera le texte et affichera également le texte intégral au passage de la souris. Vous pouvez append un texte supplémentaire et append un hachage de clic angular 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; } 

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 }} {{ modal.title | slice:0:20 }} , puis vous pouvez emprunter à @Govan ci-dessus pour utiliser {{ modal.title.length > 20 ? '...' : ''}} {{ modal.title.length > 20 ? '...' : ''}} pour append les points de suspension si la chaîne est plus longue que 20, le résultat final est donc simplement:

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

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

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

Injectez le filtre tronqué dans votre module d’application comme ceci:

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

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

 {{ text | characters:20 }} 

LA SOLUTION LA PLUS FACILE -> j’ai trouvé est de laisser la conception matérielle (1.0.0-rc4) faire le travail. Le md-input-container fera le travail pour vous. Il enchaîne la chaîne et ajoute elipses. De plus, il a l’avantage supplémentaire de vous permettre de cliquer dessus pour obtenir le texte intégral. Vous devrez peut-être définir la largeur du 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 vous avez deux liaisons {{item.name}} et {{item.directory}} .

Et vous voulez afficher les données sous la forme d’un répertoire suivi du nom, en supposant “/ root” comme répertoire et “Machine” comme nom (/ root-machine).

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

J’ai créé cette directive qui fait cela facilement, tronque la chaîne à une limite spécifiée et ajoute une option “afficher plus / moins”. Vous pouvez le trouver sur GitHub: https://github.com/doukasd/AngularJS-Components

il peut être utilisé comme ceci:

 
{{veryLongText}} 

Voici la directive:

 // a directive to auto-collapse long text app.directive('ddCollapseText', ['$comstack', function($comstack) { return { ressortingct: '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 atsortingbute 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 = Ssortingng(text).subssortingng(0, maxLength); var secondPart = Ssortingng(text).subssortingng(maxLength, text.length); // create some new html elements to hold the separate info var firstSpan = $comstack('' + firstPart + '')(scope); var secondSpan = $comstack('' + secondPart + '')(scope); var moreIndicatorSpan = $comstack('...')(scope); var toggleButton = $comstack('{{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); } }); } }; }]); 

Et quelques CSS pour aller avec:

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

Cette solution utilise purement le tag ng sur HTML.

La solution est de limiter le long texte affiché avec le lien “show more …” à la fin. Si l’utilisateur clique sur “Afficher plus …”, il affichera le rest du texte et supprimera le lien “Afficher plus …”.

HTML:

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

Limiter le nombre de mots avec un filtre angular personnalisé: Voici comment j’ai utilisé un filtre angular pour limiter le nombre de mots affichés à l’aide d’un filtre personnalisé.

HTML:

 {{dataModelObject.TextValue | limitWordsTo: 38}} ...... 

Code angular / Javascript

 angular.module('app') .filter('limitWordsTo', function () { return function (ssortingngData, numberOfWords) { //Get array of words (determined by spaces between words) var arrayOfWords = ssortingngData.split(" "); //Get loop limit var loopLimit = numberOfWords > arrayOfWords.length ? arrayOfWords.length : numberOfWords; //Create variables to hold limited word ssortingng and array iterator var limitedSsortingng = '', i; //Create limited ssortingng 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 

Ca marche bien pour moi ‘En span’, ng-show = “MyCtrl.value. $ ViewValue.length> your_limit” … en savoir plus. ‘fin de course’

J’utilise un bel ensemble de bibliothèques de filtres utiles “Angular-filter” et l’une d’entre elles appelée “truncate” est également utile.

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

l’utilisation est:

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