用AngularJS限制一个string的长度
我有以下几点：
<div>{{modal.title}}</div> 有没有办法，我可以限制string的长度说20个字符？
还有一个更好的问题是，有一种方法可以改变string被截断，并显示...如果它超过20个字符？
编辑最新版本的AngularJS提供了limitTofilter 。
你需要一个像这样的自定义filter ：
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:' ...'}}
选项：
- wordwise（布尔） – 如果是真的，只能通过单词边界切割，
- max（整数） – 文本的最大长度，剪切到这个字符数，
- tail（string，默认值：'…'） – 如果string被剪切，则将此string添加到inputstring中。
另一个解决scheme ： http ://ngmodules.org/modules/angularjs-truncate（by @Ehvince）
这里是没有CSS的简单的一行修复。
{{ myString | limitTo: 20 }}{{myString.length > 20 ? '...' : ''}}
我知道这是晚了，但在最新版本的angularjs（我使用1.2.16）limitTofilter支持string以及数组，所以你可以像这样限制string的长度：
{{ "My String Is Too Long" | limitTo: 9 }}
这将输出：
My String
你可以简单地将一个css类添加到div，并通过angularjs添加一个工具提示，以便修剪的文本将鼠标hover在可见。
<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; }
我有一个类似的问题，这就是我所做的：
{{ longString | limitTo: 20 }} {{longString.length < 20 ? '' : '...'}}
更优雅的解决scheme
HTML：
<html ng-app="phoneCat"> <body> {{ "AngularJS string limit example" | strLimit: 20 }} </body> </html>
Angular Code：
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
由于只有在string长度超过限制时我们才需要省略号，所以使用ng-if不是绑定来添加省略号似乎更合适。
{{ longString | limitTo: 20 }}<span ng-if="longString.length > 20">…</span>
< div >{{modal.title | limitTo:20}}...< / div>
有一个选项
.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>
这是一个截断文本的自定义filter。 它的灵感来自EpokK的解决scheme，但是根据我的需求和口味进行了修改。
angular.module('app').filter('truncate', function () { return function (content, maxCharacters) { if (content == null) return ""; content = "" + content; content = content.trim(); if (content.length <= maxCharacters) return content; content = content.substring(0, maxCharacters); var lastSpace = content.lastIndexOf(" "); if (lastSpace > -1) content = content.substr(0, lastSpace); return content + '...'; }; });
这里是unit testing，所以你可以看到它应该如何performance：
describe('truncate filter', function () { var truncate, unfiltered = " one two three four "; beforeEach(function () { module('app'); inject(function ($filter) { truncate = $filter('truncate'); }); }); it('should be defined', function () { expect(truncate).to.be.ok; }); it('should return an object', function () { expect(truncate(unfiltered, 0)).to.be.ok; }); it('should remove leading and trailing whitespace', function () { expect(truncate(unfiltered, 100)).to.equal("one two three four"); }); it('should truncate to length and add an ellipsis', function () { expect(truncate(unfiltered, 3)).to.equal("one..."); }); it('should round to word boundaries', function () { expect(truncate(unfiltered, 10)).to.equal("one two..."); }); it('should split a word to avoid returning an empty string', function () { expect(truncate(unfiltered, 2)).to.equal("on..."); }); it('should tolerate non string inputs', function () { expect(truncate(434578932, 4)).to.equal("4345..."); }); it('should tolerate falsey inputs', function () { expect(truncate(0, 4)).to.equal("0"); expect(truncate(false, 4)).to.equal("fals..."); }); });
您可以通过使用filter来限制string或数组的长度。 查看AngularJS团队编写的这个。
在html中，它与由angular自身提供的limitTofilter一起使用，如下所示 ，
<p> {{limitTo:30 | keepDots }} </p>
过滤keepDots：
App.filter('keepDots' , keepDots) function keepDots() { return function(input,scope) { if(!input) return; if(input.length > 20) return input+'...'; else return input; } }
Use this in your html - {{value | limitTocustom:30 }} and write this custom filter in your angular file, app.filter('limitTocustom', function() { 'use strict'; return function(input, limit) { if (input) { if (limit > input.length) { return input.slice(0, limit); } else { return input.slice(0, limit) + '...'; } } }; }); // if you initiate app name by variable app. eg: var app = angular.module('appname',[])
这可能不是从脚本结束，但您可以使用下面的CSS并将此类添加到div。 这将截断文本，并在鼠标hover上显示全文。 你可以添加更多的文本，并添加一个angular度单击哈勒来改变CLI的div类
.ellipseContent { overflow: hidden; white-space: nowrap; -ms-text-overflow: ellipsis; text-overflow: ellipsis; } .ellipseContent:hover { overflow: visible; white-space: normal; }
如果你想像这样： InputString => StringPart1 … StringPart2
HTML：
<html ng-app="myApp"> <body> {{ "AngularJS string limit example" | strLimit: 10 : 20 }} </body> </html>
Angular Code：
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…3720DF6680E17036.jar
我发现简单的限制string长度的最简单的解决scheme是{{ modal.title | slice:0:20 }} {{ modal.title | slice:0:20 }} ，然后从@Govan上面借用可以使用{{ modal.title.length > 20 ? '...' : ''}} {{ modal.title.length > 20 ? '...' : ''}}如果string长度超过20，则添加暂停点，所以最终的结果就是：
{{ modal.title | slice:0:20 }}{{ modal.title.length > 20 ? '...' : ''}}
https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html
你可以使用这个npm模块： https ： //github.com/sparkalow/angular-truncate
将截断filter注入到您的应用程序模块，如下所示：
var myApp = angular.module('myApp', ['truncate']);
并以这种方式在您的应用程序中应用filter：
{{ text | characters:20 }}
最简单的解决scheme – >我发现是让材料devise（1.0.0-RC4）做的工作。 md-input-container将为你做的工作。 它连接string，并添加elipses加上它有额外的优势，让您点击它来获取全文，所以它是整个enchilada。 您可能需要设置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 }
我创build了这个指令，很容易做到这一点，截断string到指定的限制，并添加“显示更多/更less”切换。 你可以在GitHub上find它： https ： //github.com/doukasd/AngularJS-Components
它可以像这样使用：
<p data-dd-collapse-text="100">{{veryLongText}}</p>
这是指令：
// a directive to auto-collapse long text app.directive('ddCollapseText', ['$compile', function($compile) { return { restrict: 'A', replace: true, link: function(scope, element, attrs) { // start collapsed scope.collapsed = false; // create the function to toggle the collapse scope.toggle = function() { scope.collapsed = !scope.collapsed; }; // get the value of the dd-collapse-text attribute attrs.$observe('ddCollapseText', function(maxLength) { // get the contents of the element var text = element.text(); if (text.length > maxLength) { // split the text in two parts, the first always showing var firstPart = String(text).substring(0, maxLength); var secondPart = String(text).substring(maxLength, text.length); // create some new html elements to hold the separate info var firstSpan = $compile('<span>' + firstPart + '</span>')(scope); var secondSpan = $compile('<span ng-if="collapsed">' + secondPart + '</span>')(scope); var moreIndicatorSpan = $compile('<span ng-if="!collapsed">...</span>')(scope); var toggleButton = $compile('<span class="collapse-text-toggle" ng-click="toggle()">{{collapsed ? "less" : "more"}}</span>')(scope); // remove the current contents of the element // and add the new ones we created element.empty(); element.append(firstSpan); element.append(secondSpan); element.append(moreIndicatorSpan); element.append(toggleButton); } }); } }; }]);
和一些CSS一起去吧：
.collapse-text-toggle { font-size: 0.9em; color: #666666; cursor: pointer; } .collapse-text-toggle:hover { color: #222222; } .collapse-text-toggle:before { content: '\00a0('; } .collapse-text-toggle:after { content: ')'; }
这个解决scheme纯粹是在HTML上使用ng标签。
解决的办法是在最后用“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>
使用自定义的Angular过滤器来限制单词的数量：下面是我如何使用Angularfilter来限制使用自定义filter显示的单词数量。
HTML：
<span>{{dataModelObject.TextValue | limitWordsTo: 38}} ......</span>
Angular / Javascript代码
angular.module('app') .filter('limitWordsTo', function () { return function (stringData, numberOfWords) { //Get array of words (determined by spaces between words) var arrayOfWords = stringData.split(" "); //Get loop limit var loopLimit = numberOfWords > arrayOfWords.length ? arrayOfWords.length : numberOfWords; //Create variables to hold limited word string and array iterator var limitedString = '', i; //Create limited string bounded by limit passed in for (i = 0; i < loopLimit; i++) { if (i === 0) { limitedString = arrayOfWords[i]; } else { limitedString = limitedString + ' ' + arrayOfWords[i]; } } return limitedString; }; }); //End filter
它适用于我'跨越'，ng-show =“MyCtrl.value。$ viewValue.length> your_limit”…阅读更多。 '结束跨度'
如果您有两个绑定{{item.name}}和{{item.directory}} 。
并且想把数据显示为一个名字后面跟着名字，假设'/ root'作为目录，'Machine'作为名字（/ root-machine）。
{{[item.directory]+[isLast ? '': '/'] + [ item.name] | limitTo:5}}
我使用了一套好用的filter库“Angular-filter”，其中一个叫做“truncate”也是很有用的。
https://github.com/a8m/angular-filter#truncate
用法是：
text | truncate: [length]: [suffix]: [preserve-boolean]
