指定した文字数を超えた場合、語尾に…を付けて省略するAngularJSのカスタムフィルター

文字列を省略するカスタムフィルター

最近はテキストを…で省略する場合はCSSが使用されることが多いがCSSでは文字数によって…を省略することはできないため、この場合はフロントエンド側で処理する場合はJavaScriptがいまでも使用される。

使い方

{{test | abbreviate:5}}のようにabbreviateと何文字を超えたときに…で省略するかを指定する。

コード

angular.module('myApp', [])
  .filter('abbreviate', function () {
    return function (text, len, end) {
      if (len === undefined) {
        // デフォルトは10文字
        len = 10;
      }
      if (end === undefined) {
        end = "…";
      }
      if(text !== undefined) {
        if(text.length > len) {
          return text.substring(0, len - 1) + end;
        }
        else {
          return text;
        }
      }
    };
  });

サンプル

関連した記事

AngularJSのHTMLタグを除去するフィルターの作成方法 AngularJSのfilterでテキストやHTMLを置換するフィルター 文字列に指定した長さに満ちるまで設定した文字列を入れるAngularJSのカスタムフィルター AngularJSの$cookieStoreで有効期間(expires)を指定