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 }}