Mam następujące:
<div>{{modal.title}}</div>Czy istnieje sposób na ograniczenie długości ciągu do 20 znaków?
A jeszcze lepszym pytaniem byłoby to, czy istnieje sposób, aby zmienić ciąg, który ma zostać obcięty i pokazać ...na końcu, jeśli ma więcej niż 20 znaków?
Odpowiedzi:
Edytuj
najnowszą wersję filtruAngularJS ofert .limitTo
Potrzebujesz takiego filtra niestandardowego :
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:' ...'}}Inne rozwiązanie : http://ngmodules.org/modules/angularjs-truncate (autor: @Ehvince)
Oto prosta poprawka jednej linii bez css.
{{ myString | limitTo: 20 }}{{myString.length > 20 ? '...' : ''}}'...'możesz również użyć encji HTML do elipsy:'…'
Wiem, że jest późno, ale w najnowszej wersji angularjs (używam 1.2.16) filtr limitTo obsługuje ciągi znaków, a także tablice, dzięki czemu możesz ograniczyć długość łańcucha w następujący sposób:
{{ "My String Is Too Long" | limitTo: 9 }}który wyświetli:
My StringMożesz po prostu dodać klasę css do div i dodać podpowiedź poprzez angularjs, aby przycięty tekst był widoczny po najechaniu myszą.
<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.
Miałem podobny problem, oto co zrobiłem:
{{ longString | limitTo: 20 }} {{longString.length < 20 ? '' : '...'}}< div >{{modal.title | limitTo:20}}...< / div>Bardziej eleganckie rozwiązanie:
HTML:
<html ng-app="phoneCat">
<body>
{{ "AngularJS string limit example" | strLimit: 20 }}
</body>
</html>Kod kątowy:
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) + '...';
};
}]);Próbny:
http://code-chunk.com/chunks/547bfb3f15aa1/str-limit-implementation-for-angularjs
inputwartość jest dynamiczna? tzn. w if (!input) {return;}przeciwnym razie wystąpią błędy konsoli JS
Ponieważ potrzebujemy wielokropka tylko wtedy, gdy długość łańcucha przekracza limit, bardziej odpowiednie wydaje się dodanie wielokropka za pomocą ng-ifniż wiązania.
{{ longString | limitTo: 20 }}<span ng-if="longString.length > 20">…</span>Istnieje opcja
.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>Najprostszym rozwiązaniem, jakie znalazłem, by po prostu ograniczyć długość sznurka było {{ modal.title | slice:0:20 }}, a następnie pożyczając od @Govan powyżej, możesz użyć, {{ modal.title.length > 20 ? '...' : ''}}aby dodać punkty zawieszenia, jeśli sznurek jest dłuższy niż 20, więc końcowy wynik jest po prostu:
{{ modal.title | slice:0:20 }}{{ modal.title.length > 20 ? '...' : ''}}
https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html
Oto niestandardowy filtr do obcinania tekstu. Jest zainspirowany rozwiązaniem EpokK, ale zmodyfikowany do moich potrzeb i gustów.
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 + '...';
};
});A oto testy jednostkowe, dzięki czemu możesz zobaczyć, jak ma się zachowywać:
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...");
});
});W html jest używany wraz z filtrem limitTo zapewnianym przez sam kątownik jak poniżej ,
<p> {{limitTo:30 | keepDots }} </p>filtruj keepDots:
App.filter('keepDots' , keepDots)
function keepDots() {
return function(input,scope) {
if(!input) return;
if(input.length > 20)
return input+'...';
else
return input;
}
}Jeśli chcesz coś takiego: InputString => StringPart1 ... StringPart2
HTML:
<html ng-app="myApp">
<body>
{{ "AngularJS string limit example" | strLimit: 10 : 20 }}
</body>
</html>Kod kątowy:
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) ;
};
}]);Przykład z następującymi parametrami:
beginLimit = 10
endLimit = 20
Przed : - /home/house/room/etc/ava_B0363852D549079E3720DF6680E17036.jar
Po : - /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',[])To może nie być koniec skryptu, ale możesz użyć poniższego css i dodać tę klasę do div. Spowoduje to obcięcie tekstu i wyświetlenie pełnego tekstu po najechaniu kursorem myszy. Możesz dodać więcej tekstu i dodać hadler kliknięcia kątowego, aby zmienić klasę div na cli
.ellipseContent {
overflow: hidden;
white-space: nowrap;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.ellipseContent:hover {
overflow: visible;
white-space: normal;
}Jeśli masz dwa powiązania {{item.name}}i {{item.directory}}.
I chcę pokazać dane jako katalog, po którym następuje nazwa, przyjmując „/ root” jako katalog i „Machine” jako nazwę (/ root-machine).
{{[item.directory]+[isLast ? '': '/'] + [ item.name] | limitTo:5}}Możesz użyć tego modułu npm: https://github.com/sparkalow/angular-truncate
Wstaw filtr obcięcia do modułu aplikacji w następujący sposób:
var myApp = angular.module('myApp', ['truncate']); i zastosuj filtr w swojej aplikacji w ten sposób:
{{ text | characters:20 }} Stworzyłem tę dyrektywę, która łatwo to robi, skraca ciąg znaków do określonego limitu i dodaje przełącznik „pokaż więcej / mniej”. Możesz go znaleźć na GitHub: https://github.com/doukasd/AngularJS-Components
można go użyć w następujący sposób:
<p data-dd-collapse-text="100">{{veryLongText}}</p>Oto dyrektywa:
// 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);
}
});
}
};
}]);I trochę CSS do tego:
.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: ')';
}To rozwiązanie wykorzystuje wyłącznie tag ng w HTML.
Rozwiązaniem jest ograniczenie długiego tekstu wyświetlanego za pomocą linku „pokaż więcej ...” na jego końcu. Jeśli użytkownik kliknie link „pokaż więcej ...”, wyświetli resztę tekstu i usunie link „pokaż więcej ...”.
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>NAJ ŁATWIEJSZE ROZWIĄZANIE -> jakie znalazłem, to pozwolenie Material Design (1.0.0-rc4) na wykonanie pracy. md-input-containerZrobi to za Ciebie. Kończy ciąg znaków i dodaje elipsy, a ponadto ma tę dodatkową zaletę, że pozwala kliknąć go, aby uzyskać pełny tekst, więc jest to cała enchilada. Może być konieczne ustawienie szerokości 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
}Ogranicz liczbę słów za pomocą niestandardowego filtra kątowego: Oto jak użyłem filtra kątowego, aby ograniczyć liczbę słów wyświetlanych za pomocą niestandardowego filtra.
HTML:
<span>{{dataModelObject.TextValue | limitWordsTo: 38}} ......</span>Kod kątowy / 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 filterUżywam ładnego zestawu przydatnych bibliotek filtrów „Filtr kątowy”, a jeden z nich o nazwie „obcinaj” też jest przydatny.
https://github.com/a8m/angular-filter#truncate
użycie jest:
text | truncate: [length]: [suffix]: [preserve-boolean]