Ala*_*an2 224 filter angularjs angularjs-filter
我有以下内容:
<div>{{modal.title}}</div>
有没有办法可以将字符串的长度限制为20个字符？
还有一个更好的问题是,有一种方法可以将字符串更改为截断并...在结尾显示它是否超过20个字符？
Gov*_*van 493
这是没有css的简单的一行修复.
{{ myString | limitTo: 20 }}{{myString.length > 20 ? '...' : ''}}
Epo*_*okK 342
编辑
最新版本的AngularJS报价limitTo过滤器.
您需要这样的自定义过滤器:
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) {
//Also remove . and , so its gives a cleaner result.
if (value.charAt(lastspace-1) === '.' || value.charAt(lastspace-1) === ',') {
lastspace = lastspace - 1;
}
value = value.substr(0, lastspace);
}
}
return value + (tail || ' …');
};
});
{{some_text | cut:true:100:' ...'}}
另一个解决方案:http://ngmodules.org/modules/angularjs-truncate(@Ehvince)
sli*_*lim 58
我知道这已经很晚了,但是在最新版本的angularjs中(我使用的是1.2.16),limitTo过滤器支持字符串和数组,因此你可以像这样限制字符串的长度:
{{ "My String Is Too Long" | limitTo: 9 }}
这将输出:
My String
Sus*_*rut 52
您可以简单地向div添加一个css类,并通过angularjs添加一个工具提示,以便在鼠标悬停时可以看到修剪过的文本.
Run Code Online (Sandbox Code Playgroud)<div class="trim-info" tooltip="{{modal.title}}">{{modal.title}}</div> .trim-info { max-width: 50px; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 15px; position: relative; }
crc*_*442 27
我遇到了类似的问题,这就是我所做的:
{{ longString | limitTo: 20 }} {{longString.length < 20 ? '' : '...'}}
Ana*_*nam 18
更优雅的解决方案
HTML:
<html ng-app="phoneCat">
<body>
{{ "AngularJS string limit example" | strLimit: 20 }}
</body>
</html>
角度代码:
var phoneCat = angular.module('phoneCat', []);
phoneCat.filter('strLimit', ['$filter', function($filter) {
return function(input, limit) {
if (! input) return;
if (input.length <= limit) {
return input;
}
return $filter('limitTo')(input, limit) + '...';
};
}]);
演示:
http://code-chunk.com/chunks/547bfb3f15aa1/str-limit-implementation-for-angularjs
Thi*_*újo 17
< div >{{modal.title | limitTo:20}}...< / div>
mni*_*chi 15
由于我们只在字符串长度超过限制时才需要省略号,所以通过使用而ng-if不是绑定来添加省略号似乎更合适.
{{ longString | limitTo: 20 }}<span ng-if="longString.length > 20">…</span>
小智 7
有一个选择
.text {
max-width: 140px;
white-space: nowrap;
overflow: hidden;
padding: 5px;
text-overflow: ellipsis;(...)
}<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi qui soluta labore! Facere nisi aperiam sequi dolores voluptatum delectus vel vero animi, commodi harum molestias deleniti, quasi nesciunt. Distinctio veniam minus ut vero rerum debitis placeat veritatis doloremque laborum optio, nemo quibusdam ad, sed cum quas maxime hic enim sint at quos cupiditate qui eius quam tempora. Ab sint in sunt consequuntur assumenda ratione voluptates dicta dolor aliquid at esse quaerat ea, veritatis reiciendis, labore repellendus rem optio debitis illum! Eos dignissimos, atque possimus, voluptatibus similique error. Perferendis error doloribus harum enim dolorem, suscipit unde vel, totam in quia mollitia.</div>我发现，仅用于限制字符串长度的最简单解决方案是{{ modal.title | slice:0:20 }}，然后从上述@Govan借用，{{ modal.title.length > 20 ? '...' : ''}}如果字符串长于20，则可以用来添加悬浮点，因此最终结果很简单：
{{ modal.title | slice:0:20 }}{{ modal.title.length > 20 ? '...' : ''}}
https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html
| 归档时间： |
|
| 查看次数： |
270579 次 |
| 最近记录： |