Tôi có những điều sau đây:
<div>{{modal.title}}</div>Có cách nào để tôi có thể giới hạn độ dài của chuỗi để nói 20 ký tự không?
Và một câu hỏi hay hơn nữa là có cách nào để tôi có thể thay đổi chuỗi bị cắt bớt và hiển thị ...ở cuối nếu nó có hơn 20 ký tự không?
Câu trả lời:
Chỉnh sửa
Phiên bản mới nhất của bộ lọc ưuAngularJS đãi .limitTo
Bạn cần một bộ lọc tùy chỉnh như thế này:
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:' ...'}}Một giải pháp khác : http://ngmodules.org/modules/angularjs-truncate (bởi @Ehvince)
Đây là sửa chữa một dòng đơn giản mà không cần css.
{{ myString | limitTo: 20 }}{{myString.length > 20 ? '...' : ''}}'...'bạn cũng có thể sử dụng thực thể HTML cho dấu chấm lửng:'…'
Tôi biết điều này là muộn, nhưng trong phiên bản angularjs mới nhất (tôi đang sử dụng 1.2.16), bộ lọc giới hạn hỗ trợ các chuỗi cũng như các mảng để bạn có thể giới hạn độ dài của chuỗi như thế này:
{{ "My String Is Too Long" | limitTo: 9 }}cái nào sẽ xuất ra:
My StringBạn có thể chỉ cần thêm một lớp css vào div và thêm một mẹo công cụ thông qua angularjs để văn bản được cắt sẽ hiển thị trên chuột.
<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; }
ng-repeat.
Tôi đã có một vấn đề tương tự, đây là những gì tôi đã làm:
{{ longString | limitTo: 20 }} {{longString.length < 20 ? '' : '...'}}< div >{{modal.title | limitTo:20}}...< / div>Giải pháp thanh lịch hơn:
HTML:
<html ng-app="phoneCat">
<body>
{{ "AngularJS string limit example" | strLimit: 20 }}
</body>
</html>Mã góc:
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) + '...';
};
}]);Bản giới thiệu:
http://code-chunk.com/chunks/547bfb3f15aa1/str-limit-im THỰCation-for-angularjs
inputgiá trị là động không? tức là if (!input) {return;}nếu không sẽ có lỗi bảng điều khiển JS
Có một lựa chọn
.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>Giải pháp đơn giản nhất tôi tìm thấy chỉ đơn giản là giới hạn độ dài chuỗi là {{ modal.title | slice:0:20 }}, và sau đó mượn từ @Govan ở trên, bạn có thể sử dụng {{ modal.title.length > 20 ? '...' : ''}}để thêm các điểm treo nếu chuỗi dài hơn 20, vì vậy kết quả cuối cùng chỉ đơn giản là:
{{ modal.title | slice:0:20 }}{{ modal.title.length > 20 ? '...' : ''}}
https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html
Đây là một bộ lọc tùy chỉnh để cắt bớt văn bản. Nó lấy cảm hứng từ giải pháp của EpokK nhưng được sửa đổi cho nhu cầu và thị hiếu của tôi.
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 + '...';
};
});Và đây là các bài kiểm tra đơn vị để bạn có thể thấy cách ứng xử của nó:
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...");
});
});Trong html, nó được sử dụng cùng với bộ lọc giới hạn được cung cấp bởi chính góc như bên dưới ,
<p> {{limitTo:30 | keepDots }} </p>bộ lọc keepDots:
App.filter('keepDots' , keepDots)
function keepDots() {
return function(input,scope) {
if(!input) return;
if(input.length > 20)
return input+'...';
else
return input;
}
}Nếu bạn muốn một cái gì đó như: InputString => StringPart1 ... StringPart2
HTML:
<html ng-app="myApp">
<body>
{{ "AngularJS string limit example" | strLimit: 10 : 20 }}
</body>
</html>Mã góc:
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) ;
};
}]);Ví dụ với các tham số sau:
startedLimit = 10
endLimit = 20
Trước : - /home/house/room/etc/ava_B0363852D549079E3720DF6680E17036.jar
Sau : - /home/hous...3720DF6680E17036.jar
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',[])Điều này có thể không phải từ cuối tập lệnh nhưng bạn có thể sử dụng css bên dưới và thêm lớp này vào div. Điều này sẽ cắt bớt văn bản và cũng hiển thị toàn văn trên di chuột. Bạn có thể thêm một văn bản và thêm một nút bấm nhấp chuột góc cạnh để thay đổi lớp div trên cli
.ellipseContent {
overflow: hidden;
white-space: nowrap;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.ellipseContent:hover {
overflow: visible;
white-space: normal;
}Nếu bạn có hai ràng buộc {{item.name}}và {{item.directory}}.
Và muốn hiển thị dữ liệu dưới dạng thư mục theo sau là tên, giả sử '/ root' là thư mục và 'Máy' là tên (/ root-machine).
{{[item.directory]+[isLast ? '': '/'] + [ item.name] | limitTo:5}}Bạn có thể sử dụng mô-đun npm này: https://github.com/sparkalow/angular-truncate
Tiêm bộ lọc cắt ngắn vào mô-đun ứng dụng của bạn như thế này:
var myApp = angular.module('myApp', ['truncate']); và áp dụng bộ lọc trong ứng dụng của bạn theo cách này:
{{ text | characters:20 }} <div>{{modal.title | slice: 0: 20}}</div>Tôi đã tạo ra lệnh này để dễ dàng thực hiện điều đó, cắt xén chuỗi đến một giới hạn chỉ định và thêm một chuyển đổi "hiển thị nhiều hơn / ít hơn". Bạn có thể tìm thấy nó trên GitHub: https://github.com/doukasd/AngularJS-Components
nó có thể được sử dụng như thế này:
<p data-dd-collapse-text="100">{{veryLongText}}</p>Đây là chỉ thị:
// 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);
}
});
}
};
}]);Và một số CSS đi kèm với nó:
.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: ')';
}Giải pháp này hoàn toàn là sử dụng thẻ ng trên HTML.
Giải pháp là giới hạn văn bản dài được hiển thị với liên kết 'hiển thị thêm ...' ở cuối của nó. Nếu người dùng nhấp vào liên kết 'hiển thị thêm ...', nó sẽ hiển thị phần còn lại của văn bản và xóa liên kết 'hiển thị thêm ...'.
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>GIẢI PHÁP DỄ DÀNG NHẤT -> tôi đã tìm thấy là để cho Thiết kế Vật liệu (1.0.0-RC4) thực hiện công việc. Ý md-input-containerchí sẽ làm việc cho bạn. Nó che giấu chuỗi và thêm elipses cộng với nó có lợi thế hơn là cho phép bạn nhấp vào chuỗi để có được toàn văn để nó là toàn bộ enchilada. Bạn có thể cần phải thiết lập chiều rộng của 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
}Giới hạn số lượng từ với bộ lọc Angular tùy chỉnh: Đây là cách tôi sử dụng bộ lọc Angular để giới hạn số lượng từ được hiển thị bằng bộ lọc tùy chỉnh.
HTML:
<span>{{dataModelObject.TextValue | limitWordsTo: 38}} ......</span>Mã góc / 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 filterTôi sử dụng một bộ thư viện bộ lọc hữu ích "Angular-filter" và một trong số chúng được gọi là "truncate" cũng hữu ích.
https://github.com/a8m/angular-filter#truncate
sử dụng là:
text | truncate: [length]: [suffix]: [preserve-boolean]