我有以下几点:
<div>{{modal.title}}</div>
有没有一种方法可以限制字符串的长度,比如20个字符?
一个更好的问题是,有没有一种方法可以将字符串更改为截断并显示。如果超过20个字符?
我有以下几点:
<div>{{modal.title}}</div>
有没有一种方法可以限制字符串的长度,比如20个字符?
一个更好的问题是,有没有一种方法可以将字符串更改为截断并显示。如果超过20个字符?
当前回答
由于只在字符串长度超过限制时才需要省略号,因此使用ng-if添加省略号似乎比使用绑定更合适。
{{ longString | limitTo: 20 }}<span ng-if="longString.length > 20">…</span>
其他回答
我知道这有点晚了,但在angularjs的最新版本(我使用的是1.2.16)中,limitTo过滤器支持字符串和数组,所以你可以像这样限制字符串的长度:
{{ "My String Is Too Long" | limitTo: 9 }}
它将输出:
My String
如果你想要这样的东西:InputString => StringPart1…StringPart2
HTML:
<html ng-app="myApp">
<body>
{{ "AngularJS string limit example" | strLimit: 10 : 20 }}
</body>
</html>
角代码:
var myApp = angular.module('myApp', []);
myApp.filter('strLimit', ['$filter', function($filter) {
return function(input, beginlimit, endlimit) {
if (! input) return;
if (input.length <= beginlimit + endlimit) {
return input;
}
return $filter('limitTo')(input, beginlimit) + '...' + $filter('limitTo')(input, -endlimit) ;
};
}]);
参数示例如下: beginLimit = 10 endLimit = 20
之前: ——/home/house/room/etc/ava_B0363852D549079E3720DF6680E17036.jar 后: - /home/hous…3720 df6680e17036.jar
我发现最简单的解决方案是让材料设计(1.0.0-rc4)来做这项工作。md-input-container将为您完成这项工作。它连接了字符串,添加了省略,它还有一个额外的好处,允许你点击它来获得全文,所以它是整个玉米卷饼。您可能需要设置md-input-container的宽度。
HTML:
<md-input-container>
<md-select id="concat-title" placeholder="{{mytext}}" ng-model="mytext" aria-label="label">
<md-option ng-selected="mytext" >{{mytext}}
</md-option>
</md-select>
</md-input-container>
CS:
#concat-title .md-select-value .md-select-icon{
display: none; //if you want to show chevron remove this
}
#concat-title .md-select-value{
border-bottom: none; //if you want to show underline remove this
}
对我来说还行 'In span', ng-show = "MyCtrl.value.$viewValue. "长度> your_limit"…阅读更多。“结束时间”
< div >{{modal.title | limitTo:20}}...< / div>