我有以下几点:
<div>{{modal.title}}</div>
有没有一种方法可以限制字符串的长度,比如20个字符?
一个更好的问题是,有没有一种方法可以将字符串更改为截断并显示。如果超过20个字符?
我有以下几点:
<div>{{modal.title}}</div>
有没有一种方法可以限制字符串的长度,比如20个字符?
一个更好的问题是,有没有一种方法可以将字符串更改为截断并显示。如果超过20个字符?
当前回答
我发现限制字符串长度的最简单的解决方案是{{modal。title | slice:0:20}},然后借用上面的@Govan,你可以使用{{modal.title.length > 20 ?“…': "}}如果字符串长于20,则添加挂起点,因此最终结果很简单:
{{模态。Title | slice:0:20}}{{modal.title.length > 20 ?“…': "}}
https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html
其他回答
ng-keypress = " filterValue(事件)”ng-model = "客户。CUSTOMER_PHONE”
美元的范围。filterValue = function($event){
if(isNaN(String.fromCharCode($event.keyCode)) ){
$event.preventDefault();
}
if($scope.customer.CUSTOMER_PHONE.length <= 11)
{
$scope.customer.CUSTOMER_PHONE = $scope.customer.CUSTOMER_PHONE;
}
else
{
$event.preventDefault();
}
};
这个解决方案纯粹是在HTML上使用ng标签。
解决方案是使用“show more…”限制显示的长文本。链接。如果用户点击“显示更多…”链接,它将显示其余的文本,并删除了“show more…”的链接。
HTML:
<div ng-init="limitText=160">
<p>{{ veryLongText | limitTo: limitText }}
<a href="javascript:void(0)"
ng-hide="veryLongText.length < limitText"
ng-click="limitText = veryLongText.length + 1" > show more..
</a>
</p>
</div>
在html中,它与angular自身提供的limitTo过滤器一起使用,如下所示:
<p> {{limitTo:30 | keepDots }} </p>
filter keepDots:
App.filter('keepDots' , keepDots)
function keepDots() {
return function(input,scope) {
if(!input) return;
if(input.length > 20)
return input+'...';
else
return input;
}
}
这可能不是来自脚本末尾,但你可以使用下面的css并将这个类添加到div中。这将截断文本,并在鼠标悬停时显示全文。你可以添加更多的文本,并添加一个角点击手柄来改变cli上的div类
.ellipseContent {
overflow: hidden;
white-space: nowrap;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.ellipseContent:hover {
overflow: visible;
white-space: normal;
}
我知道这有点晚了,但在angularjs的最新版本(我使用的是1.2.16)中,limitTo过滤器支持字符串和数组,所以你可以像这样限制字符串的长度:
{{ "My String Is Too Long" | limitTo: 9 }}
它将输出:
My String