232

私は次のものを持っています：

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

文字列の長さを 20 文字に制限する方法はありますか?

さらに良い質問は、文字列が...20文字を超える場合、文字列を切り捨てて最後に表示するように変更する方法はありますか?

4

26 に答える 26

504

これは、css を使用しない単純な 1 行の修正です。

{{ myString | limitTo: 20 }}{{myString.length > 20 ? '...' : ''}}
于 2014-09-17T13:49:26.747 に答える
349

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 (integer) - テキストの最大長。この文字数にカットされます。
  • tail (文字列、デフォルト: ' …') - 文字列が切り取られた場合、この文字列を入力文字列に追加します。

別の解決策: http://ngmodules.org/modules/angularjs-truncate (by @Ehvince)

于 2013-08-07T06:24:54.330 に答える
52

css クラスを div に追加し、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;
   }
于 2013-08-07T06:42:51.657 に答える
27

私は同様の問題を抱えていました、ここに私がしたことがあります：

{{ longString | limitTo: 20 }} {{longString.length < 20 ? '' : '...'}}
于 2014-12-19T20:51:12.150 に答える
22 
< div >{{modal.title | limitTo:20}}...< / div>
于 2016-07-15T18:51:07.663 に答える
18

よりエレガントなソリューション:

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

于 2014-12-01T05:28:08.730 に答える
7

オプションがあります

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

于 2016-08-29T09:49:37.110 に答える
3

次のようなものが必要な場合: 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/house...3720DF6680E17036.jar

于 2016-10-05T13:06:46.703 に答える
3

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

于 2014-02-12T06:04:37.120 に答える
2 
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',[])
于 2015-12-08T12:55:38.010 に答える
2

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

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

    .ellipseContent:hover {
        overflow: visible;
        white-space: normal;
    }
于 2016-02-11T19:23:11.403 に答える
1

この npm モジュールを使用できます: https://github.com/sparkalow/angular-truncate

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

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

この方法でアプリにフィルターを適用します。

{{ text | characters:20 }}
于 2015-10-29T10:22:20.407 に答える
1

次のように切り捨てを行うには、次の三項演算子の代替を使用し...ます。

<div>{{ modal.title.length > 20 ? (modal.title | limitTo : 20) + '...' : modal.title }}</div>
于 2020-11-16T13:56:02.960 に答える
0

このソリューションは、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>
于 2015-12-17T10:59:55.100 に答える
0

最も簡単な解決策 --> 私が見つけたのは、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
}
于 2016-02-16T16:30:30.733 に答える
0

'In span', ng-show = "MyCtrl.value.$viewValue.length > your_limit" ...続きを読む. 「エンドスパン」

于 2016-08-12T05:22:22.020 に答える
0

これを簡単に実行し、指定された制限まで文字列を切り捨て、「表示を増やす/減らす」トグルを追加するこのディレクティブを作成しました。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: ')';
}
于 2014-08-07T14:52:55.340 に答える
0

カスタム Angular フィルターで単語数を制限する: カスタム フィルターを使用して表示される単語数を制限するために Angular フィルターを使用する方法を次に示します。

HTML:

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

Angular/Javascript コード

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
于 2016-06-01T18:52:26.173 に答える
0

私は便利なフィルタ ライブラリ「Angular-filter」の素晴らしいセットを使用しており、そのうちの 1 つである「truncate」も便利です。

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

使用法は次のとおりです。

text | truncate: [length]: [suffix]: [preserve-boolean]
于 2017-09-29T09:28:00.480 に答える