标签:
数据存在一个数组里面,需要把这些数据显示到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过程中控制字符串长度超过指定长度后面内容以省略号显示
标签:
原文地址:http://www.cnblogs.com/Shirley-He/p/5564060.html