AngularJS：如何仅在字符串超过限制时才使用limitTo过滤器显示省略号
Posted
技术标签:
【中文标题】AngularJS：如何仅在字符串超过限制时才使用limitTo过滤器显示省略号【英文标题】：AngularJS: how do I show ellipses using limitTo filter only when a string exceeds the limit 【发布时间】：2016-11-20 13:30:36 【问题描述】：我正在对某些字符串使用 limitTo 过滤器。如果字符串少于 10 个字符，则字符串按原样显示。如果字符串长于 10 个字符，我想在第十个字符处截断字符串后显示省略号。这样做有角度捷径吗？谢谢
例如：
main.title | limitTo:10
如果 main.title = "A Good Day"，输出将是：A Good Day
如果 main.title = "A Terrible Day"，输出将是：A Terrible...
【问题讨论】：
【参考方案1】：希望这会有所帮助：
main.title | limitTo: 10 main.title.length > 10 ? '...' : ''
【讨论】：
我更喜欢这个答案，而不是使用另一个带有 ng-if 的跨度，谢谢 这很快，易于理解，并且完美地满足了我的需要。 我建议使用 html 省略号：…【参考方案2】：
好吧，如果你愿意，你可以为此构建一个过滤器，但我会使用ngIf 指令，如下所示：
(function()
'use strict';
angular.module('app', [])
.controller('mainCtrl', function()
var vm = this;
vm.text = 'Really longer than 10';
);
)();<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.7/angular.min.js"></script>
</head>
<body ng-controller="mainCtrl as ctrl">
Without limit: <span ng-bind="ctrl.text"></span>
<hr>
With limit: <span ng-bind="ctrl.text | limitTo:10"></span>
<span ng-if="ctrl.text.length > 10">...</span>
</body>
</html>【讨论】：
太棒了。谢谢你的帮助。答案很明显，但它超越了我。【参考方案3】：根据limitTo 编写您自己的过滤器是最好的方法。
angular.module('your-module-name').filter('dotsFilter', [
'$filter',
function ($filter)
/**
* Shorten the input and add dots if it's needed
* @param string input
* @param number limit
*/
function dotsFilter(input, limit)
var newContent = $filter('limitTo')(input, limit);
if(newContent.length < input.length) newContent += '...';
return newContent;
return dotsFilter;
]);
在视图中使用：
model.longTextData | dotsFilter:10
【讨论】：
【参考方案4】：使用<span ng-class="'ellipsis': text.length > limit">text | limitTo:limit</span>
你需要定义一个css类.ellipsis:after content: '...'; 和一个作用域变量limit
或
text.length > limit ? ((text | limitTo:limit) + "...") : text
(function()
"use strict";
angular.module('app', [])
.controller('mainCtrl', function($scope)
$scope.text = "Hello World";
$scope.limit = 10;
);
)();.ellipsis:after content: '...'; <!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>
<body ng-controller="mainCtrl">
<h3>Using Option1</h3>
<span ng-class="'ellipsis': text.length > limit"> text | limitTo:limit </span>
<br>
<h3>Using Option2</h3>
<span> text.length > limit ? ((text | limitTo:limit) + "...") : text </span>
</body>
</html>【讨论】：
这很好很简单，你可以做limitTo:limit-3，不像BeingSuman的答案，它可能会为单个字符添加省略号。【参考方案5】：
由于已经发布了使用 angularjs 的其他答案，我将给你一个简单的 css 技术来做到这一点。
(function()
"use strict";
angular.module('app', [])
.controller('mainCtrl', function($scope)
$scope.text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book";
);
)();span.ellipsis
display:inline-block;
width:180px;
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>
<body ng-controller="mainCtrl">
<span ng:class="true:'ellipsis', false:''[text.length>=10]" style="max-width: 10ch;">text</span>
</body>
</html>【讨论】：
你是如何限制字符数的？ 我已经根据要求更新了我的答案，请看看它是否适合你 span.ellipsis:after content: '...' 你不应该需要内联块（这只是因为它是一个跨度，所以内联而不是内联块）并且通常不需要 !important【参考方案6】：以后阅读的人可能会考虑使用 CSS 而不是 JS。比如：
.ellipsis
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
【讨论】：
我同意这是最好的解决方案:) 不需要使用JS的地方最好不要使用【参考方案7】：<div maxlength="59">
row.RequestTitle.length > 59 ? row.RequestTitle.substr(0,59) + '...' : row.RequestTitle
</div>
这很有用，也可以运行，Angular 5 Material UI
【讨论】：
请将代码块缩进 4 个空格，而不是使用粗体格式。代码块（包含 4 个空格或内联反引号的完整代码块）也允许 HTML 标记而不将它们格式化为帖子的一部分。【参考方案8】：如果有人想在控制器中使用省略号逻辑，那么下面的代码 sn-p 会有所帮助：
$filter('limitTo')(input, limit) + (input.length > limit ? '…' : '');
其中input 和limit 将是“输入字符串”和数值限制值，例如
$filter('limitTo')(stringText, 20) + (stringText.length > 20 ? '…' : '');
【讨论】：
以上是关于AngularJS：如何仅在字符串超过限制时才使用limitTo过滤器显示省略号的主要内容，如果未能解决你的问题，请参考以下文章
如何限制AngularJS中<td>条目中显示的字符[重复]
angularjs如何在ng-repeat过程中控制字符串长度超过指定长度后面内容以省略号显示