У мене є таке:
<div>{{modal.title}}</div>Чи є спосіб, щоб я міг обмежити довжину рядка, щоб сказати 20 символів?
І ще краще питання, чи є спосіб, який я міг би змінити рядок, який має бути усіченим, і показати ...в кінці, якщо це більше 20 символів?
Відповіді:
Редагувати
останню версію фільтраAngularJS пропозицій .limitTo
Вам потрібен спеціальний фільтр, такий:
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:' ...'}}Ще одне рішення : http://ngmodules.org/modules/angularjs-truncate (автор @Ehvince)
Ось просте виправлення рядків без css.
{{ myString | limitTo: 20 }}{{myString.length > 20 ? '...' : ''}}'...'ви також можете використовувати сутність HTML для еліпсису:'…'
Я знаю, що це пізно, але в останній версії angularjs (я використовую 1.2.16) фільтр limitTo підтримує рядки, а також масиви, щоб ви могли обмежити довжину рядка таким чином:
{{ "My String Is Too Long" | limitTo: 9 }}який виведе:
My StringВи можете просто додати клас css до div та додати підказку інструменту через angularjs, щоб обрізаний текст був видно мишею.
<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.
У мене була подібна проблема, ось що я зробив:
{{ longString | limitTo: 20 }} {{longString.length < 20 ? '' : '...'}}< div >{{modal.title | limitTo:20}}...< / div>Більш елегантне рішення:
HTML:
<html ng-app="phoneCat">
<body>
{{ "AngularJS string limit example" | strLimit: 20 }}
</body>
</html>Кутовий код:
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) + '...';
};
}]);Демонстрація:
http://code-chunk.com/chunks/547bfb3f15aa1/str-limit-implementation-for-angularjs
inputзначення є динамічним? тобто в if (!input) {return;}іншому випадку будуть помилки на консолі JS
Оскільки нам потрібен еліпсис лише тоді, коли довжина струни перевищує межу, видається еліпсисом більш доцільним шляхом використання, ng-ifніж зв'язування.
{{ longString | limitTo: 20 }}<span ng-if="longString.length > 20">…</span>Є варіант
.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>Найпростішим рішенням, яке я знайшов для простого обмеження довжини рядка, було {{ modal.title | slice:0:20 }}, а потім запозичення у @Govan вище ви можете використовувати {{ modal.title.length > 20 ? '...' : ''}}для додавання точок призупинення, якщо рядок довший 20, тож кінцевий результат просто:
{{ modal.title | slice:0:20 }}{{ modal.title.length > 20 ? '...' : ''}}
https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html
Ось спеціальний фільтр для обрізання тексту. Він натхненний рішенням EpokK, але модифікований на мої потреби та смаки.
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 + '...';
};
});Ось одиничні тести, щоб ви могли побачити, як слід поводитись:
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...");
});
});У html його використовують разом з фільтром limitTo, наданим самим кутовим, як показано нижче ,
<p> {{limitTo:30 | keepDots }} </p>фільтри KeepDots:
App.filter('keepDots' , keepDots)
function keepDots() {
return function(input,scope) {
if(!input) return;
if(input.length > 20)
return input+'...';
else
return input;
}
}Якщо ви хочете чогось типу: InputString => StringPart1 ... StringPart2
HTML:
<html ng-app="myApp">
<body>
{{ "AngularJS string limit example" | strLimit: 10 : 20 }}
</body>
</html>Кутовий код:
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) ;
};
}]);Приклад із наступними параметрами:
beginLimit = 10
endLimit = 20
Перед : - /home/house/room/etc/ava_B0363852D549079E3720DF6680E17036.jar
Після : - /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',[])Це може бути не з кінця сценарію, але ви можете скористатися наведеним нижче css та додати цей клас у div. Це врізає текст, а також відобразить повний текст при наведенні миші. Ви можете додати більше тексту та додати кутник для кутового клацання, щоб змінити клас діла на cli
.ellipseContent {
overflow: hidden;
white-space: nowrap;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.ellipseContent:hover {
overflow: visible;
white-space: normal;
}Якщо у вас дві прив’язки {{item.name}}і {{item.directory}}.
І хочемо показати дані у вигляді каталогу з ім'ям, вважаючи "/ root" як каталог та "Machine" як ім'я (/ root-machine).
{{[item.directory]+[isLast ? '': '/'] + [ item.name] | limitTo:5}}Ви можете використовувати цей модуль npm: https://github.com/sparkalow/angular-truncate
Введіть фільтр усікання в модуль програми так:
var myApp = angular.module('myApp', ['truncate']); і застосуйте фільтр у вашій програмі таким чином:
{{ text | characters:20 }} Я створив цю директиву, яка легко робить це, обрізає рядок до заданої межі і додає перемикач "показати більше / менше". Ви можете знайти його на GitHub: https://github.com/doukasd/AngularJS-Components
його можна використовувати так:
<p data-dd-collapse-text="100">{{veryLongText}}</p>Ось директива:
// 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);
}
});
}
};
}]);І деякі CSS, щоб іти з цим:
.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: ')';
}Це рішення суто з використанням ng- тегів у HTML.
Рішення полягає в тому, щоб обмежити довгий текст, який відображається за допомогою посилання "показати більше ..." в кінці. Якщо користувач натисне посилання "показати більше ...", він покаже решту тексту та видалить посилання "показати більше ...".
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>Найпростіше рішення -> я знайшов, щоб дозволити матеріальному дизайну (1.0.0-rc4) виконати роботу. md-input-containerРобитиме роботу за вас. Він стискає рядок і додає еліпси, плюс він має додаткову перевагу, що дозволяє вам клацнути по ньому, щоб отримати повний текст, так що це вся енхілада. Можливо, вам потрібно буде встановити ширину 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
}Обмежте кількість слів за допомогою спеціального кутового фільтра. Ось як я використовував кутовий фільтр, щоб обмежити кількість слів, що відображаються за допомогою спеціального фільтра.
HTML:
<span>{{dataModelObject.TextValue | limitWordsTo: 38}} ......</span>Кутовий / 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Я використовую приємний набір корисної бібліотеки фільтрів "Angular-filter", і один із них під назвою "усікати" також є корисним.
https://github.com/a8m/angular-filter#truncate
використання:
text | truncate: [length]: [suffix]: [preserve-boolean]