web-dev-qa-db-ja.com

AngularJS：文字列が制限を超えた場合にのみ、limitToフィルターを使用して楕円を表示する方法

一部の文字列でlimitToフィルターを使用しています。文字列がたとえば10文字未満の場合、文字列はそのまま表示されます。文字列が10文字より長い場合、10番目の文字で文字列を切り取った後、楕円を表示します。 angularこれを行うためのショートカットはありますか？ありがとう

例えば：

{{main.title | limitTo:10}}

main.title = "A Good Day"の場合、出力は次のようになります。A Good Day

main.title = "A Terrible Day"の場合、出力は次のようになります。A Terrible ...

angularjsstringfilter
14
d1du

必要に応じて、このフィルターを作成できますが、以下のようにngIfディレクティブを使用します。

(function() {
  'use strict';

  angular.module('app', [])
    .controller('mainCtrl', function() {
      var vm = this;

      vm.text = 'Really longer than 10';
    });
})();
<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.7/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl as ctrl">
  Without limit: <span ng-bind="ctrl.text"></span>
  <hr>
  With limit: <span ng-bind="ctrl.text | limitTo:10"></span>
  <span ng-if="ctrl.text.length > 10">...</span>
</body>

</html>
26
developer033

お役に立てれば ：

{{ main.title | limitTo: 10 }}{{main.title.length > 10 ? '...' : ''}}
36
BeingSuman

<span ng-class="{'Ellipsis': text.length > limit}">{{text | limitTo:limit}}</span>を使用

CSSクラス.Ellipsis:after{ content: '...'; }とスコープ変数limitを定義する必要があります

[〜＃〜] or [〜＃〜]

{{ text.length > limit ? ((text | limitTo:limit) + "...") : text }}

(function() {
      "use strict";
      angular.module('app', [])
        .controller('mainCtrl', function($scope) {
          $scope.text = "Hello World";
          $scope.limit = 10;
        });
    })();
.Ellipsis:after{ content: '...'; }
<!DOCTYPE html>
    <html ng-app="app">

    <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
    </head>

    <body ng-controller="mainCtrl">
      <h3>Using Option1</h3>
      <span ng-class="{'Ellipsis': text.length > limit}">{{ text | limitTo:limit }}</span>
      <br>
      <h3>Using Option2</h3>
      <span>{{ text.length > limit ? ((text | limitTo:limit) + "...") : text }}</span>
    </body>

    </html>
4
muasif80

これを行うには、limitToに基づいて独自のフィルターを作成するのが最善の方法です。

angular.module('your-module-name').filter('dotsFilter', [
    '$filter',
    function ($filter) {
        /**
         * Shorten the input and add dots if it's needed
         * @param {string} input 
         * @param {number} limit
         */
        function dotsFilter(input, limit) {
            var newContent = $filter('limitTo')(input, limit);
            if(newContent.length < input.length) { newContent += '...'; }
            return newContent;
        }

        return dotsFilter;
    }
]);

ビューで使用：

{{ model.longTextData | dotsFilter:10 }}
4
Krzysztof Raciniewski

Anglejsを使用した他の回答が既に投稿されているので、簡単なCSSテクニックを紹介します。

   (function() {
      "use strict";
      angular.module('app', [])
        .controller('mainCtrl', function($scope) {
          $scope.text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book";
        });
    })();
span.Ellipsis {
    display:inline-block;
    width:180px;
    white-space: nowrap;
    overflow:hidden;
    text-overflow: Ellipsis;
}
    <!DOCTYPE html>
    <html ng-app="app">

    <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
    </head>

    <body ng-controller="mainCtrl">
      <span ng:class="{true:'Ellipsis', false:''}[text.length>=10]" style="max-width: 10ch;">{{text}}</span>
    </body>

    </html>
2
Raman Sahasi
<div maxlength="59"> 
  {{row.RequestTitle.length > 59 ? row.RequestTitle.substr(0,59) + '...' : row.RequestTitle}} 
</div>

これは便利で実行もできますAngular 5 Material UI

1
user10889447

将来読む人は、JSの代わりにCSSの使用を検討するかもしれません。何かのようなもの：

.Ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: Ellipsis;
}
0
diegopso