使用AngularJS限制字符串的长度

我有以下几点:

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

有没有一种方法可以限制字符串的长度，比如20个字符?

一个更好的问题是，有没有一种方法可以将字符串更改为截断并显示。如果超过20个字符?

当前回答

这里是简单的一行修复没有css。

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

2014-09-17 13:49:26

其他回答

编辑 AngularJSoffers的最新版本的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) -如果为真，仅按单词边界切割， Max (integer) -文本的最大长度，切到这个字符数， Tail (string，默认值:'…')-将此字符串添加到输入如果绳子被剪断，就用绳子。

另一个解决方案:http://ngmodules.org/modules/angularjs-truncate (by @Ehvince)

2013-08-07 06:24:54

你可以简单地在div中添加一个css类，并通过angularjs添加一个工具提示，这样鼠标移过去时就可以看到修剪后的文本。

< div class = " trim-info“工具提示= " {{modal.title}} > {{modal.title}} < / div > .trim-info { max-width: 50 px; 显示:inline-block; 溢出:隐藏; 文本溢出:省略; 空白:nowrap;} 行高:15 px; 位置:相对; ｝

2013-08-07 06:42:51

如果你想要这样的东西: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…3720 df6680e17036.jar

2016-10-05 13:06:46

可以使用筛选器限制字符串或数组的长度。看看AngularJS团队写的这个。

2014-02-12 06:04:37

<div>{{modal.title | slice: 0: 20}}</div>

2019-08-20 08:01:35

使用AngularJS限制字符串的长度

推荐文章

最新文章

标签