问题描述
数据存在一个数组里面，需要把这些数据显示到HTML页面上，目前是通过ng-repeat方式来显示。但是数组中title这一项的字符长度比较长，所以想要限制一下这段字符在HTML页面上显示时，超过指定的长度后面的内容就会以省略号的形式显示。请问要怎么样实现？
html页面：
<p ng-repeat='x in TU'> <img src='https://www.6hehe.com/wenda/{{x.imgurl}}'> <h1>{{x.title}}</h1> <p>{{x.cost}}</p></p>
数据格式如下：
$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'}]
问题解答
回答1：轉貼自 filter - Limit the length of a string with AngularJS - Stack Overflow
寫一個 filter：
jsangular.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 演示
回答2：官方有 api https://docs.angularjs.org/api/ng/filter/limitTo
例子 html 模板中：
Output numbers: {{ numbers | limitTo:numLimit }}
回答3：直接css解决吧，需要3个属性，分别表示不换行、超出部分隐藏、有超出部分显示省略号
white-space: nowrap;overflow: hidden;text-overflow: ellipsis;回答4：
自定义angularjs filter剪裁长字符串，加上省略号，演示地址：http://www.jscssshare.com/#/sample/e6ao1zeH
