使用AngularJS限制字符串的长度

我有以下几点:

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

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

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

当前回答

这个解决方案纯粹是在HTML上使用ng标签。

解决方案是使用“show more…”限制显示的长文本。链接。如果用户点击“显示更多…”链接，它将显示其余的文本，并删除了“show more…”的链接。

HTML:

<div ng-init="limitText=160">
   <p>{{ veryLongText | limitTo: limitText }} 
       <a href="javascript:void(0)" 
           ng-hide="veryLongText.length < limitText" 
           ng-click="limitText = veryLongText.length + 1" > show more..
       </a>
   </p>
</div>

2015-12-17 10:59:55

其他回答

如果你想要这样的东西: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

编辑 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

我发现限制字符串长度的最简单的解决方案是{{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中，它与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

我发现最简单的解决方案是让材料设计(1.0.0-rc4)来做这项工作。md-input-container将为您完成这项工作。它连接了字符串，添加了省略，它还有一个额外的好处，允许你点击它来获得全文，所以它是整个玉米卷饼。您可能需要设置md-input-container的宽度。

HTML:

<md-input-container>
   <md-select id="concat-title" placeholder="{{mytext}}" ng-model="mytext" aria-label="label">
      <md-option ng-selected="mytext" >{{mytext}}
      </md-option>
   </md-select>
</md-input-container>

CS:

#concat-title .md-select-value .md-select-icon{
   display: none; //if you want to show chevron remove this
}
#concat-title .md-select-value{
   border-bottom: none; //if you want to show underline remove this
}

2016-02-16 16:30:30

使用AngularJS限制字符串的长度

推荐文章

最新文章

标签