angularjs如何在ng-repeat过程中控制字符串长度超过指定长度后面内容以省略号显示

Posted JQD

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了angularjs如何在ng-repeat过程中控制字符串长度超过指定长度后面内容以省略号显示相关的知识,希望对你有一定的参考价值。

数据存在一个数组里面,需要把这些数据显示到html页面上,目前是通过ng-repeat方式来显示。但是数组中title这一项的字符长度比较长,所以想要限制一下这段字符在HTML页面上显示时,超过指定的长度后面的内容就会以省略号的形式显示。请问要怎么样实现?

html页面:

<div ng-repeat="x in TU"> 
<img src="{{x.imgurl}}"> 
<h1>{{x.title}}</h1> 
<p>{{x.cost}}</p>
</div>

数据格式如下:

$scope.TU = [{
    "tuid":"xy0001",
    "imgurl":"img/178.jpg",
    "title":"哈哈哈哈哈哈哈哈哈",
    "cost":"86"
},
    {
    "tuid":"xy0002",
    "imgurl":"img/178.jpg",
    "title":"呵呵呵呵呵呵呵呵呵呵呵呵",
    "cost":"96"
},
{
    "tuid":"xy0003",
    "imgurl":"img/178.jpg",
    "title":"嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿",
    "cost":"89"
}
]


寫一個 filter:

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) {
        value = value.substr(0, lastspace);
      }
    }

    return value + (tail || ‘ …‘);
  };
});

使用方式:

{{some_text | cut:true:100:‘ ...‘}}

參數:

切字方式 (布林) - 如果是 true,只切單字。
長度 (整數) - 要保留的最大字數。
後輟 (字串,默认:‘…‘) - 接在字詞的後面。

 

或者直接用別人寫好的:angular-truncate 演示

 

官方有 api https://docs.angularjs.org/api/ng/filter/limitTo

例子 html 模板中:

Output numbers: {{ numbers | limitTo:numLimit }}

以上是关于angularjs如何在ng-repeat过程中控制字符串长度超过指定长度后面内容以省略号显示的主要内容,如果未能解决你的问题,请参考以下文章

如何在 AngularJs 中对字典使用 ng-repeat?

如何使用 ng-repeat 使 bxSlider 在 AngularJS 中工作?

如何使用AngularJS从ng-repeat中的数组中删除对象?

如何在 AngularJs 中使用 ng-repeat 过滤(键、值)?

如何在 AngularJs 中使用 ng-repeat 过滤(键、值)?

angularJS如何计算输入元素中显示的ng-repeat数据