使用AngularJS限制字符串的长度

我有以下几点:

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

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

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

当前回答

更优雅的解决方案:

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

其他回答

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

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

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

2020-11-16 13:56:02

你可以简单地在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

如果你有两个绑定{{item.name}}和{{item.directory}}。

并且希望将数据显示为一个后跟名称的目录，假设目录为“/root”，名称为“Machine”(/root- Machine)。

{{[item.directory]+[isLast ? '': '/'] + [ item.name]  | limitTo:5}}

2017-08-16 22:32:03

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

2019-08-20 08:01:35

使用AngularJS限制字符串的长度

推荐文章

最新文章

标签