使用AngularJS限制字符串的长度

我有以下几点:

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

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

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

当前回答

由于只在字符串长度超过限制时才需要省略号，因此使用ng-if添加省略号似乎比使用绑定更合适。

{{ longString | limitTo: 20 }}<span ng-if="longString.length > 20">&hellip;</span>

2016-02-12 20:49:22

其他回答

我发现限制字符串长度的最简单的解决方案是{{modal。title | slice:0:20}}，然后借用上面的@Govan，你可以使用{{modal.title.length > 20 ?“…': "}}如果字符串长于20，则添加挂起点，因此最终结果很简单:

https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html

2017-06-05 21:25:42

更优雅的解决方案:

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-01 05:28:08

在html中，它与angular自身提供的limitTo过滤器一起使用，如下所示:

    <p> {{limitTo:30 | keepDots }} </p>

filter keepDots:

     App.filter('keepDots' , keepDots)

       function keepDots() {

        return function(input,scope) {
            if(!input) return;

             if(input.length > 20)
                return input+'...';
            else
                return input;

        }


    }

2015-02-01 11:53:35

你可以使用这个npm模块:https://github.com/sparkalow/angular-truncate

将截断过滤器注入到你的应用模块中，如下所示:

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

在你的应用程序中这样应用过滤器:

{{ text | characters:20 }}

2015-10-29 10:22:20

我将使用以下三元操作符替代来完成截断…遵循:

<div>{{ modal.title.length > 20 ? (modal.title | limitTo : 20) + '...' : modal.title }}</div>

2020-11-16 13:56:02

使用AngularJS限制字符串的长度

推荐文章

最新文章

标签