У меня есть следующее:
<div>{{modal.title}}</div>
Есть ли способ, которым я мог бы ограничить длину строки, чтобы сказать 20 символов?
И еще лучший вопрос был бы, есть ли способ, которым я мог бы изменить строку, которая будет обрезана и показать ...
в конце, если это больше чем 20 символов?
Ответы:
Редактировать Последняя версия фильтра
AngularJS
предложений .limitTo
Вам нужен специальный фильтр, подобный этому:
Использование:
Параметры:
Другое решение : http://ngmodules.org/modules/angularjs-truncate (автор @Ehvince)
источник
Вот простое исправление в одну строку без CSS.
источник
'...'
вы также можете использовать HTML-сущность для многоточия:'…'
Я знаю, что уже поздно, но в последней версии angularjs (я использую 1.2.16) фильтр limitTo поддерживает строки, а также массивы, поэтому вы можете ограничить длину строки следующим образом:
который выведет:
источник
Вы можете просто добавить класс css в div и добавить подсказку через angularjs, чтобы обрезанный текст был виден при наведении мыши.
источник
ng-repeat
.У меня была похожая проблема, вот что я сделал:
источник
источник
Более элегантное решение:
HTML:
Угловой код:
Демо-версия:
http://code-chunk.com/chunks/547bfb3f15aa1/str-limit-implementation-for-angularjs
источник
input
значение является динамическим? т.е. вif (!input) {return;}
противном случае будут ошибки консоли JSПоскольку многоточие нам нужно только тогда, когда длина строки превышает предел, представляется целесообразнее добавить многоточие с помощью, а
ng-if
не связывания.источник
Есть вариант
источник
Самое простое решение, которое я нашел для простого ограничения длины строки, было
{{ 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, но изменен для моих потребностей и вкусов.
А вот модульные тесты, чтобы вы могли увидеть, как он должен себя вести:
источник
Вы можете ограничить длину строки или массива с помощью фильтра. Проверьте это, написанное командой AngularJS.
источник
В html он используется вместе с фильтром limitTo, предоставляемым самим angular, как показано ниже ,
фильтр keepDots:
источник
Если вы хотите что-то вроде: InputString => StringPart1 ... StringPart2
HTML:
Угловой код:
Пример со следующими параметрами:
beginLimit = 10
endLimit = 20
До : - /home/house/room/etc/ava_B0363852D549079E3720DF6680E17036.jar
После : - /home/hous...3720DF6680E17036.jar
источник
источник
Это может быть не из конца скрипта, но вы можете использовать приведенную ниже CSS и добавить этот класс в div. Это обрезает текст, а также отображает полный текст при наведении курсора. Вы можете добавить больше текста и добавить угловой хедлер, чтобы изменить класс div на cli.
источник
Если у вас есть две привязки
{{item.name}}
и{{item.directory}}
.И хотите показать данные в виде каталога, за которым следует имя, принимая в качестве «/ root» в качестве каталога и «Machine» в качестве имени (/ root-machine).
источник
Вы можете использовать этот модуль npm: https://github.com/sparkalow/angular-truncate
Вставьте усеченный фильтр в модуль приложения следующим образом:
и примените фильтр в вашем приложении следующим образом:
источник
источник
Я создал эту директиву, которая легко это делает, обрезает строку до указанного предела и добавляет переключатель «показать больше / меньше». Вы можете найти его на GitHub: https://github.com/doukasd/AngularJS-Components
это можно использовать так:
Вот директива:
И немного CSS, чтобы пойти с этим:
источник
Это решение использует только тег ng в HTML.
Решение состоит в том, чтобы ограничить длинный текст, отображаемый ссылкой «показать больше ...» в конце. Если пользователь щелкнет ссылку «показать больше ...», он покажет остальную часть текста и удалит ссылку «показать больше ...».
HTML:
источник
Самое простое решение -> я нашел, чтобы позволить Material Design (1.0.0-rc4) сделать работу.
md-input-container
Будет делать работу за вас. Он объединяет строку и добавляет elipses, а также имеет дополнительное преимущество, заключающееся в том, что вы можете щелкнуть по нему, чтобы получить полный текст, так что это целая энчилада. Возможно, вам придется установить ширинуmd-input-container
.HTML:
CS:
источник
Ограничьте количество слов с помощью пользовательского фильтра Angular. Вот как я использовал фильтр Angular, чтобы ограничить количество слов, отображаемых с помощью специального фильтра.
HTML:
Угловой / Javascript код
источник
Для меня это нормально работает 'In span', ng-show = "MyCtrl.value. $ ViewValue.length> your_limit" ... читать дальше. 'конец пролета'
источник
Я использую хороший набор полезных библиотек фильтров "Angular-filter", и одна из них называется "truncate".
https://github.com/a8m/angular-filter#truncate
использование это:
источник