답변:
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 (by @Ehvince)
다음은 CSS가없는 간단한 한 줄 수정입니다.
{{ myString | limitTo: 20 }}{{myString.length > 20 ? '...' : ''}}'...'줄임표에 HTML 엔터티를 사용할 수도 있습니다.'…'
나는 이것이 늦었지만 최신 버전의 angularjs (1.2.16을 사용하고 있음)에서 limitTo 필터는 문자열뿐만 아니라 배열을 지원하므로 다음과 같이 문자열의 길이를 제한 할 수 있습니다.
{{ "My String Is Too Long" | limitTo: 9 }}출력됩니다 :
My Stringdiv에 CSS 클래스를 추가하고 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 콘솔 오류가 발생합니다
옵션이 있습니다
.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...");
});
});다음과 같은 것을 원하면 : 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에서 div 클래스를 변경하기 위해 더 많은 텍스트를 추가하고 각도 클릭 hadler를 추가 할 수 있습니다
.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: ')';
}이 솔루션은 순수하게 HTML에서 ng 태그를 사용합니다.
해결책은 끝에 '더보기 ...'링크로 표시되는 긴 텍스트를 제한하는 것입니다. 사용자가 '더보기 ...'링크를 클릭하면 나머지 텍스트가 표시되고 '더보기 ...'링크가 제거됩니다.
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>가장 쉬운 해결책-> 내가 찾은 것은 Material Design (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>각도 / 자바 스크립트 코드
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"를 사용하고 "truncate"라고하는 것도 유용합니다.
https://github.com/a8m/angular-filter#truncate
사용법은 다음과 같습니다.
text | truncate: [length]: [suffix]: [preserve-boolean]