Limiter la longueur d'une chaîne avec AngularJS
J'ai le suivant:
<div>{{modal.title}}</div>
Est-il possible de limiter la longueur de la chaîne à 20 caractères?
Et une question encore meilleure serait: est-il possible de changer la chaîne pour qu'elle soit tronquée et afficher ... à la fin si elle compte plus de 20 caractères?
Edit La dernière version de AngularJSoffers limitTo filter .
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 || ' …');
};
});
Usage:
{{some_text | cut:true:100:' ...'}}
Options:
- wordwise (boolean) - si vrai, coupé seulement par les mots limites,
- max (entier) - longueur maximale du texte, coupé à ce nombre de caractères,
- tail (string, default: '…') - ajoute cette chaîne à l'entrée chaîne si la chaîne a été coupée.
Une autre solution: http://ngmodules.org/modules/angularjs-truncate (par @Ehvince)
Voici le correctif simple en une ligne sans CSS.
{{ myString | limitTo: 20 }}{{myString.length > 20 ? '...' : ''}}
Je sais que c'est tard, mais dans la dernière version d'angularjs (j'utilise la version 1.2.16), le filtre limitTo prend en charge les chaînes ainsi que les tableaux, ce qui vous permet de limiter la longueur de la chaîne de la manière suivante:
{{ "My String Is Too Long" | limitTo: 9 }}
qui produira:
My String
Vous pouvez simplement ajouter une classe css à la div 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; }
J'ai eu un problème similaire, voici ce que j'ai fait:
{{ longString | limitTo: 20 }} {{longString.length < 20 ? '' : '...'}}
< div >{{modal.title | limitTo:20}}...< / div>
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
Etant donné que nous avons besoin d’Ellipsis uniquement lorsque la longueur de chaîne dépasse la limite, il semble plus approprié d’ajouter Ellipsis à l’aide de ng-if plutôt que de la liaison.
{{ longString | limitTo: 20 }}<span ng-if="longString.length > 20">…</span>
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>Voici un filtre personnalisé pour tronquer du texte. Il est inspiré de la solution EpokK mais modifié pour répondre à 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 afin que vous puissiez 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...");
});
});
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/room/room/etc /ava_B0363852D549079E3720DF6680E17036.jar
Après : - /home/hous...3720DF6680E17036.jar
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 }}, 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;
{{ modal.title | slice:0:20 }}{{ modal.title.length > 20 ? '...' : ''}}
https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html
Vous pouvez limiter la longueur d'une chaîne ou d'un tableau en utilisant un filtre. Vérifiez celui-ci écrit par l’équipe AngularJS.
En html son utilisé avec limitTo filtre fourni par angular lui-même comme ci-dessous
<p> {{limitTo:30 | keepDots }} </p>
filter keepDots:
App.filter('keepDots' , keepDots)
function keepDots() {
return function(input,scope) {
if(!input) return;
if(input.length > 20)
return input+'...';
else
return input;
}
}
Cela ne vient peut-être pas de la fin du script, mais vous pouvez utiliser le css ci-dessous et ajouter cette classe au div. Cela tronquera le texte et affichera également le texte intégral au passage de la souris. Vous pouvez ajouter plus de texte et un clic angulaire 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;
}
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',[])
Si vous avez deux liaisons {{item.name}} et {{item.directory}}.
Et souhaitez afficher les données sous la forme d'un répertoire suivi du nom, en prenant le répertoire "/ root" et le nom "Machine" (/ root-machine).
{{[item.directory]+[isLast ? '': '/'] + [ item.name] | limitTo:5}}
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 appliquez le filtre dans votre application de la manière suivante:
{{ text | characters:20 }}
Cela fonctionne bien pour moi 'In span', ng-show = "MyCtrl.value. $ ViewValue.length> your_limit" ... en savoir plus. 'end span'
LA SOLUTION LA PLUS FACILE -> que j'ai trouvée est de laisser Material Design (1.0.0-rc4) faire le travail. Le md-input-container fera le travail pour vous. Il concatte la chaîne et ajoute des élipses. En outre, il offre l’avantage supplémentaire de vous permettre de cliquer dessus pour obtenir le texte intégral, de sorte que c’est l’enchilada entière. Vous devrez peut-être 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
}
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
utilisation est:
text | truncate: [length]: [suffix]: [preserve-boolean]
J'ai créé cette directive qui le fait facilement, tronque la chaîne à une limite spécifiée et ajoute une bascule "afficher plus/moins". 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 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: ')';
}
Limitez 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 à l’aide d’un filtre personnalisé.
HTML:
<span>{{dataModelObject.TextValue | limitWordsTo: 38}} ......</span>
Angular/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
Cette solution utilise uniquement ng tag sur HTML.
La solution consiste à limiter le texte descriptif affiché avec le lien "afficher plus ..." à la fin. Si l'utilisateur clique sur le lien "afficher plus ...", il affichera le reste du texte et supprimera le lien "afficher plus ...".
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>