使用AngularJS限制字符串的长度

我有以下几点:

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

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

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

当前回答

在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

其他回答

更优雅的解决方案:

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

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

2014-02-12 06:04:37

这可能不是来自脚本末尾，但你可以使用下面的css并将这个类添加到div中。这将截断文本，并在鼠标悬停时显示全文。你可以添加更多的文本，并添加一个角点击手柄来改变cli上的div类

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

    .ellipseContent:hover {
        overflow: visible;
        white-space: normal;
    }

2016-02-11 19:23:11

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

2016-07-15 18:51:07

Use this in your html - {{value | limitTocustom:30 }}

and write this custom filter in your angular file,

app.filter('limitTocustom', function() {
    'use strict';
    return function(input, limit) {
        if (input) {
            if (limit > input.length) {
                return input.slice(0, limit);
            } else {
                return input.slice(0, limit) + '...';
            }
        }
    };
});

// if you initiate app name by variable app. eg: var app = angular.module('appname',[])

2015-12-08 12:55:38

使用AngularJS限制字符串的长度

推荐文章

最新文章

标签