나는 다음을 가지고있다 :
<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:' ...'}}
옵션 :
- wordwise (boolean)-true이면 단어 경계로만 자릅니다.
- max (정수)-텍스트의 최대 길이로,이 문자 수로 잘립니다.
- tail (문자열, 기본값 : ‘…’)-문자열이 잘린 경우이 문자열을 입력 문자열에 추가합니다.
다른 해결책 : http://ngmodules.org/modules/angularjs-truncate (by @Ehvince)
답변
다음은 CSS가없는 간단한 한 줄 수정입니다.
{{ myString | limitTo: 20 }}{{myString.length > 20 ? '...' : ''}}
답변
나는 이것이 늦었지만 최신 버전의 angularjs (1.2.16을 사용하고 있음)에서 limitTo 필터는 문자열뿐만 아니라 배열을 지원하므로 다음과 같이 문자열의 길이를 제한 할 수 있습니다.
{{ "My String Is Too Long" | limitTo: 9 }}
출력됩니다 :
My String
답변
div에 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; }
답변
비슷한 문제가 있었는데 여기에 내가 한 일이 있습니다.
{{ 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