[angularjs] AngularJS로 문자열 길이 제한

나는 다음을 가지고있다 :

<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