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?
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)
Voici la solution simple d'une ligne sans css.
{{ myString | limitTo: 20 }}{{myString.length > 20 ? '...' : ''}}
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
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; }
j'ai eu un problème similaire, voici ce que j'ai fait:
{{ longString | limitTo: 20 }} {{longString.length < 20 ? '' : '...'}}
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
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">…</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 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...");
});
});
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;
}
}
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
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
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',[])
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;
}
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 }}
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
}
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}}
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: ')';
}
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>
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
ça marche pour moi 'In span', ng-show = "MyCtrl.valeur.$ viewValue.longueur > your_limit" ...lire la suite. 'fin span'
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]