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