Question

我在某些字符串上使用limitTo过滤器。如果字符串小于，例如10个字符，则字符串按原样显示。如果字符串超过10个字符，我想在第十个字符处切断字符串后显示省略号。这样做是否有角色快捷方式？感谢

例如：

{{main.title | limitTo:10}}

如果main.title =“美好的一天”，输出将是：美好的一天

如果main.title =“可怕的一天”，输出将是：可怕......

Answer 1

希望这会有所帮助：

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

Answer 2

好吧，如果你想要，你可以为此构建一个过滤器，但我会使用ngIf指令，如下所示：

＆＃13;

(function() {
  'use strict';

  angular.module('app', [])
    .controller('mainCtrl', function() {
      var vm = this;

      vm.text = 'Really longer than 10';
    });
})();

＆＃13;

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

＆＃13;

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

Answer 4

基于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 }}

Answer 5

由于已经发布了使用angularjs的其他答案，我将为您提供一种简单的css技术。

＆＃13;

   (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";
        });
    })();

＆＃13;

span.ellipsis {
    display:inline-block;
    width:180px;
    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
}

＆＃13;

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

＆＃13;

Answer 6

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

这对Angular 5 Material UI很有用，也可以运行

Answer 7

将来的读者可能会考虑使用CSS而不是JS。像这样：

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

Answer 8

如果有人想在控制器中使用省略号逻辑，那么下面的代码片段将会有所帮助：

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

input和limit将是'输入字符串'和数字限制值，例如

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

AngularJS：仅当字符串超出限制时，如何使用limitTo过滤器显示省略号

8 个答案: