我正在对某些字符串使用 limitTo 过滤器。如果字符串少于 10 个字符，则字符串按原样显示。如果字符串长于 10 个字符，我想在第十个字符处截断字符串后显示省略号。这样做有角度捷径吗？谢谢
例如：
{{main.title | limitTo:10}}
如果 main.title = "A Good Day"，输出将是：A Good Day
如果 main.title = "A Terrible Day"，输出将是：A Terrible...
【问题讨论】：
希望这会有所帮助：
{{ main.title | limitTo: 10 }}{{main.title.length > 10 ? '...' : ''}}
【讨论】：
…
好吧，如果你愿意，你可以为此构建一个过滤器，但我会使用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>【讨论】：
根据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 }}
【讨论】：
使用<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的答案，它可能会为单个字符添加省略号。
由于已经发布了使用 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>【讨论】：
以后阅读的人可能会考虑使用 CSS 而不是 JS。比如：
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
【讨论】：
<div maxlength="59">
{{row.RequestTitle.length > 59 ? row.RequestTitle.substr(0,59) + '...' : row.RequestTitle}}
</div>
这很有用，也可以运行，Angular 5 Material UI
【讨论】：
如果有人想在控制器中使用省略号逻辑，那么下面的代码 sn-p 会有所帮助：
$filter('limitTo')(input, limit) + (input.length > limit ? '…' : '');
其中input 和limit 将是“输入字符串”和数值限制值，例如
$filter('limitTo')(stringText, 20) + (stringText.length > 20 ? '…' : '');
【讨论】：