AngularJS: как показать эллипсы, используя limitTo фильтр, только когда строка превышает предел

Я использую фильтр limitTo для некоторых строк. Если строка меньше, например, 10 символов, то строка отображается как есть. Если строка длиннее 10 символов, я хочу отображать эллипсы после отрезания строки на десятом символе. Есть ли angular ярлык для этого? Благодаря

например:

{{main.title | limitTo:10}}

если main.title= "Хороший день", выход будет: Хороший день

если main.title= "A Terrible Day", выход будет выглядеть следующим образом: Ужасно...

Ответы

Ответ 1

Ну, если вы хотите, вы можете создать для этого фильтр, но я бы использовал директиву 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>

Ответ 2

Надеюсь, что это поможет:

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

Ответ 3

Используйте <span ng-class="{'ellipsis': text.length > limit}">{{text | limitTo:limit}}</span>

Вам нужно определить класс css .ellipsis:after{ content: '...'; } и переменную области видимости limit

ИЛИ

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

Написание собственного фильтра на основе limitTo - лучший способ сделать это.

angular.module('your-module-name').filter('dotsFilter', [
    '$filter',
    function ($filter) {
        /**
         * Shorten the input and add dots if it 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 }}

Ответ 5

Поскольку другие ответы с использованием angularjs уже отправлены, я дам вам простой метод 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 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>

Ответ 6

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

это полезно и работает, Angular 5 Material UI

Ответ 7

Кто-то, читающий в будущем, может подумать об использовании CSS вместо JS. Что-то вроде:

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

Ответ 8

Если кто-то хочет использовать логику многоточия в контроллере, тогда будет полезен следующий фрагмент кода:

$filter('limitTo')(input, limit) + (input.length > limit ? '&hellip;' : '');

Где input и limit будут "вводной строкой" и числовым предельным значением, например

$filter('limitTo')(stringText, 20) + (stringText.length > 20 ? '&hellip;' : '');