web-dev-qa-db-ja.com

AngularJSで文字列の長さを制限する

私は以下を持っています：

<div>{{modal.title}}</div>

私は20文字を言うために文字列の長さを制限することができる方法はありますか？

さらに良い質問は、文字列を切り捨てて20文字以上の場合は末尾に...を表示するように変更できるということでしょうか。

angularjsfilterangularjs-filter
220
Alan2

編集 AngularJSoffersの最新バージョン limitTo filter 。

このようなカスタムフィルタが必要です。

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） - 真の場合、単語の境界だけでカット
  • max（integer） - テキストの最大長。この文字数にカットします。
  • tail（string、default： '…'） - 文字列が切り取られた場合、この文字列を入力文字列に追加します。

他の解決策 ： http://ngmodules.org/modules/angularjs-truncate （@Ehvinceによる）

340
EpokK

これはcssなしの簡単な1行修正です。

{{ myString | limitTo: 20 }}{{myString.length > 20 ? '...' : ''}}
485
Govan

私はこれが遅れていることを知っていますが、最近のバージョンのangularjs（私は1.2.16を使っています）では、limitToフィルタは文字列と配列をサポートしているので、文字列の長さを制限できます。

{{ "My String Is Too Long" | limitTo: 9 }}

出力されます：

My String
57
slim

あなたは単純に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;
   }
50
Sushrut

私は同様の問題を抱えていた、これが私がしたことです：

{{ longString | limitTo: 20 }} {{longString.length < 20 ? '' : '...'}}
27
crc442
< div >{{modal.title | limitTo:20}}...< / div>
17
Thiago Araújo

よりエレガントな解決策：

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

17
Anam

省略記号が必要なのは文字列の長さが制限を超えている場合だけなので、バインドよりもng-ifを使用して省略記号を追加する方が適切であると思われます。

{{ longString | limitTo: 20 }}<span ng-if="longString.length > 20">&hellip;</span>
15
mnishiguchi

オプションがあります

.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>
7
Aleksandr Havrylov

これはテキストを切り捨てるためのカスタムフィルタです。それは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...");
    });
});
4
SharkAlley

以下のようなものが必要な場合： 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

3
vhamon

文字列の長さを単純に制限するための 私が見つけた最も簡単な解決策 は{{ modal.title | slice:0:20 }}で、上の@Govanから借りることで、文字列が20より長い場合は{{ modal.title.length > 20 ? '...' : ''}}を使って中断点を追加できます。 ：

{{ modal.title | slice:0:20 }}{{ modal.title.length > 20 ? '...' : ''}}

https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html

3
maudulus

フィルタを使用して、文字列または配列の長さを制限できます。チェック これ / AngularJSチームによって書かれました。

3
MAM

htmlでは以下のようにangle自身によって提供されるlimitToフィルタと一緒に使用されます、

    <p> {{limitTo:30 | keepDots }} </p>

filter keepDots：

     App.filter('keepDots' , keepDots)

       function keepDots() {

        return function(input,scope) {
            if(!input) return;

             if(input.length > 20)
                return input+'...';
            else
                return input;

        }


    }
3
Shushanth Pallegar

これはスクリプトの最後からではないかもしれませんが、以下のCSSを使用してこのクラスをdivに追加することができます。これによりテキストが切り捨てられ、マウスオーバー時にフルテキストも表示されます。あなたはより多くのテキストを追加し、cliのdivのクラスを変更するために角度クリックハドラーを追加することができます。

.ellipseContent {
    overflow: hidden;
    white-space: nowrap;
    -ms-text-overflow: Ellipsis;
    text-overflow: Ellipsis;
}

    .ellipseContent:hover {
        overflow: visible;
        white-space: normal;
    }
2
Kurkula
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',[])
2
Silent Spectator

{{item.name}}と{{item.directory}}の2つのバインディングがある場合.

そして、ディレクトリとして '/ root'を、名前として 'Machine'を仮定して、データをディレクトリとそれに続く名前で表示したい（/ root-machine）。

{{[item.directory]+[isLast ? '': '/'] + [ item.name]  | limitTo:5}}
1
Harish Pothula

あなたはこのnpmモジュールを使うことができます： https://github.com/sparkalow/angular-truncate

このようにトランケートフィルタをアプリモジュールに挿入します。

var myApp = angular.module('myApp', ['truncate']);

このようにしてアプリにフィルタを適用します。

{{ text | characters:20 }}
1
charming mel

それは私にとってはうまくいきます 'in span'、ng-show = "MyCtrl.value。$ viewValue.length> your_limit" ...もっと読む。 「スパン終了」

0
G. K.

最も簡単な解決策 - > 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
}
0
Helzgate

私は便利なフィルタライブラリ "Angular-filter"を使い、 "truncate"と呼ばれるものも便利です。

https://github.com/a8m/angular-filter#truncate

使い方は次のとおりです。

text | truncate: [length]: [suffix]: [preserve-boolean]
0
Lukas Jelinek

私は簡単にそれをし、指定された制限に文字列を切り捨て、そして "もっと見る/もっと見る"トグルを追加するこのディレクティブを作成しました。あなたは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: ')';
}
0
Dimitris

カスタムAngularフィルタを使用して単語数を制限する： /カスタムフィルタを使用して表示される単語数を制限するためにAngularフィルタを使用する方法は次のとおりです。

HTML： 

<span>{{dataModelObject.TextValue | limitWordsTo: 38}} ......</span>

Angular/Javascript Code 

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
0
Geoff

この解決法は純粋にHTML上で ng tagを使っています。

解決策は、最後に 'show more ...'リンクを付けて表示される長いテキストを制限することです。ユーザーが[もっと表示...]リンクをクリックすると、残りのテキストが表示され、[もっと表示...]リンクが削除されます。

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>
0
Amirul