Tengo lo siguiente:
<div>{{modal.title}}</div>¿Hay alguna manera de limitar la longitud de la cadena para decir 20 caracteres?
Y una pregunta aún mejor sería: ¿hay alguna manera de que pueda cambiar la cadena para que se trunca y mostrar ...al final si tiene más de 20 caracteres?
Respuestas:
Editar
La última versión del filtro de AngularJSofertas .limitTo
Necesita un filtro personalizado como este:
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 || ' …');
};
});{{some_text | cut:true:100:' ...'}}Otra solución : http://ngmodules.org/modules/angularjs-truncate (por @Ehvince)
Aquí está la solución simple de una línea sin CSS.
{{ myString | limitTo: 20 }}{{myString.length > 20 ? '...' : ''}}'...'usted también puede usar la entidad HTML para puntos suspensivos:'…'
Sé que esto es tarde, pero en la última versión de angularjs (estoy usando 1.2.16), el filtro limitTo admite cadenas y matrices para que pueda limitar la longitud de la cadena de esta manera:
{{ "My String Is Too Long" | limitTo: 9 }}que dará como resultado:
My StringSimplemente puede agregar una clase css al div y agregar información sobre herramientas a través de angularjs para que el texto recortado sea visible al pasar el mouse.
<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; }
ng-repeat.
Tuve un problema similar, esto es lo que hice:
{{ longString | limitTo: 20 }} {{longString.length < 20 ? '' : '...'}}< div >{{modal.title | limitTo:20}}...< / div>Solución más elegante:
HTML:
<html ng-app="phoneCat">
<body>
{{ "AngularJS string limit example" | strLimit: 20 }}
</body>
</html>Código 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) + '...';
};
}]);Manifestación:
http://code-chunk.com/chunks/547bfb3f15aa1/str-limit-implementation-for-angularjs
inputvalor sea dinámico? es decir, de lo if (!input) {return;}contrario habrá errores de la consola JS
Dado que necesitamos puntos suspensivos solo cuando la longitud de la cadena está por encima del límite, parece más apropiado agregar puntos suspensivos mediante el uso ng-ifque el enlace.
{{ longString | limitTo: 20 }}<span ng-if="longString.length > 20">…</span>Hay una opcion
.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>La solución más simple que encontré para limitar simplemente la longitud de la cadena fue {{ modal.title | slice:0:20 }}, y luego tomar prestado de @Govan arriba puede usar {{ modal.title.length > 20 ? '...' : ''}}para agregar los puntos de suspensión si la cadena es más larga que 20, por lo que el resultado final es simplemente:
{{ modal.title | slice:0:20 }}{{ modal.title.length > 20 ? '...' : ''}}
https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html
Aquí hay un filtro personalizado para truncar texto. Está inspirado en la solución de EpokK pero modificado para mis necesidades y gustos.
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 + '...';
};
});Y aquí están las pruebas unitarias para que pueda ver cómo se supone que debe comportarse:
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 se usa junto con limitTo filter provisto por angular en sí como se muestra a continuación ,
<p> {{limitTo:30 | keepDots }} </p>filtro keepDots:
App.filter('keepDots' , keepDots)
function keepDots() {
return function(input,scope) {
if(!input) return;
if(input.length > 20)
return input+'...';
else
return input;
}
}Si desea algo como: InputString => StringPart1 ... StringPart2
HTML:
<html ng-app="myApp">
<body>
{{ "AngularJS string limit example" | strLimit: 10 : 20 }}
</body>
</html>Código 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) ;
};
}]);Ejemplo con los siguientes parámetros:
beginLimit = 10
endLimit = 20
Antes : - /home/house/room/etc/ava_B0363852D549079E3720DF6680E17036.jar
Despué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 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',[])Esto puede no ser del final del script, pero puede usar el siguiente CSS y agregar esta clase al div. Esto truncará el texto y también mostrará el texto completo al pasar el mouse. Puede agregar un texto más y agregar un controlador de clic angular para cambiar la clase de div en cli
.ellipseContent {
overflow: hidden;
white-space: nowrap;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.ellipseContent:hover {
overflow: visible;
white-space: normal;
}Si tienes dos enlaces {{item.name}}y {{item.directory}}.
Y desea mostrar los datos como un directorio seguido del nombre, suponiendo '/ root' como el directorio y 'Machine' como el nombre (/ root-machine).
{{[item.directory]+[isLast ? '': '/'] + [ item.name] | limitTo:5}}Puede usar este módulo npm: https://github.com/sparkalow/angular-truncate
Inyecte el filtro truncado en el módulo de su aplicación de esta manera:
var myApp = angular.module('myApp', ['truncate']); y aplique el filtro en su aplicación de esta manera:
{{ text | characters:20 }} Creé esta directiva que hace eso fácilmente, trunca la cadena a un límite especificado y agrega un conmutador "mostrar más / menos". Puede encontrarlo en GitHub: https://github.com/doukasd/AngularJS-Components
se puede usar así:
<p data-dd-collapse-text="100">{{veryLongText}}</p>Aquí está la directiva:
// 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);
}
});
}
};
}]);Y algo de CSS para acompañarlo:
.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: ')';
}Esta solución es puramente usando ng tag en HTML.
La solución es limitar el texto largo que se muestra con el enlace 'mostrar más ...' al final. Si el usuario hace clic en el enlace "Mostrar más ...", mostrará el resto del texto y eliminará el enlace "Mostrar más ...".
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>LA SOLUCIÓN MÁS FÁCIL -> que he encontrado es dejar que Material Design (1.0.0-rc4) haga el trabajo. El md-input-containerhará el trabajo por usted. Concatena la cadena y agrega elipses, además tiene la ventaja adicional de permitirle hacer clic para obtener el texto completo para que sea toda la enchilada. Es posible que deba establecer el ancho de 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
}Limite la cantidad de palabras con un filtro angular personalizado: así es como utilicé un filtro angular para limitar la cantidad de palabras que se muestran usando un filtro personalizado.
HTML:
<span>{{dataModelObject.TextValue | limitWordsTo: 38}} ......</span>Código angular / 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 filterUtilizo un buen conjunto de útiles bibliotecas de filtros "Angular-filter" y una de ellas llamada "truncar" también es útil.
https://github.com/a8m/angular-filter#truncate
el uso es:
text | truncate: [length]: [suffix]: [preserve-boolean]