Şunlara sahibim:
<div>{{modal.title}}</div>Dizenin uzunluğunu 20 karakterle sınırlayabilmemin bir yolu var mı?
Ve daha da iyi bir soru, kesilecek dizeyi değiştirebileceğim ...ve sonunda 20 karakterden fazla ise gösterebileceğim bir yol var mı?
Yanıtlar:
Edit
son sürümünü AngularJSteklifler limitTofiltresi .
Bunun gibi özel bir filtreye ihtiyacınız var :
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:' ...'}}Başka bir çözüm : http://ngmodules.org/modules/angularjs-truncate (@Ehvince tarafından)
İşte css olmadan basit bir satır düzeltme.
{{ myString | limitTo: 20 }}{{myString.length > 20 ? '...' : ''}}'...'HTML varlığını üç nokta için de kullanabilirsiniz:'…'
Bu geç olduğunu biliyorum, ama angularjs (1.2.16 kullanıyorum) en son sürümünde limitTo filtre dizeleri yanı sıra dizileri destekler, böylece böyle dize uzunluğunu sınırlayabilirsiniz:
{{ "My String Is Too Long" | limitTo: 9 }}Hangi çıktı:
My StringDiv'e bir css sınıfı ekleyebilir ve kesilmiş metnin fareyle üzerine gelmesi için angularjs aracılığıyla bir araç ipucu ekleyebilirsiniz.
<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.
Benzer bir sorunum vardı, işte yaptığım şey:
{{ longString | limitTo: 20 }} {{longString.length < 20 ? '' : '...'}}< div >{{modal.title | limitTo:20}}...< / div>Daha zarif bir çözüm:
HTML:
<html ng-app="phoneCat">
<body>
{{ "AngularJS string limit example" | strLimit: 20 }}
</body>
</html>Açısal Kod:
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) + '...';
};
}]);Demo:
http://code-chunk.com/chunks/547bfb3f15aa1/str-limit-implementation-for-angularjs
inputDeğerin dinamik olması durumunda bir getiri eklemeyi önerebilir miyim ? yani if (!input) {return;}Aksi JS konsol hatalar olacaktır
Sadece dize uzunluğu sınırı aştığında üç noktaya ihtiyacımız olduğundan, üç nokta eklemek için üç nokta eklemek ng-ifbağlayıcıdan çok daha uygun görünür .
{{ longString | limitTo: 20 }}<span ng-if="longString.length > 20">…</span>Bir seçenek var
.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>Dize uzunluğunu basitçe sınırlamak için bulduğum en basit çözüm{{ modal.title | slice:0:20 }} , daha sonra @Govan'dan ödünç almak {{ modal.title.length > 20 ? '...' : ''}}, dize 20'den uzunsa süspansiyon noktalarını eklemek için kullanabilirsiniz , bu nedenle nihai sonuç basittir:
{{ modal.title | slice:0:20 }}{{ modal.title.length > 20 ? '...' : ''}}
https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html
İşte metni kısaltmak için özel bir filtre. EpokK'nın çözümünden ilham aldı, ancak ihtiyaçları ve zevklerim için değiştirildi.
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 + '...';
};
});Ve burada birim testleri, böylece nasıl davranması gerektiğini görebilirsiniz:
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...");
});
});HTML'de açısal kendisi tarafından sağlanan limitTo filtresi ile birlikte kullanılır ,
<p> {{limitTo:30 | keepDots }} </p>filtre keepDots:
App.filter('keepDots' , keepDots)
function keepDots() {
return function(input,scope) {
if(!input) return;
if(input.length > 20)
return input+'...';
else
return input;
}
}Gibi bir şey istiyorsanız: InputString => StringPart1 ... StringPart2
HTML:
<html ng-app="myApp">
<body>
{{ "AngularJS string limit example" | strLimit: 10 : 20 }}
</body>
</html>Açısal Kod:
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) ;
};
}]);Aşağıdaki parametrelere sahip örnek:
beginLimit = 10
endLimit = 20
Önce : - /home/house/room/etc/ava_B0363852D549079E3720DF6680E17036.jar
Sonra : - /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',[])Bu komut dosyası sonundan olmayabilir, ancak aşağıdaki css'i kullanabilir ve bu sınıfı div öğesine ekleyebilirsiniz. Bu, metni kısaltacak ve fareyle üzerine gelindiğinde tam metni gösterecektir. Daha fazla metin ekleyebilir ve cli'daki div sınıfını değiştirmek için açısal tıklama hadler'i ekleyebilirsiniz.
.ellipseContent {
overflow: hidden;
white-space: nowrap;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.ellipseContent:hover {
overflow: visible;
white-space: normal;
}İki bağlantınız varsa {{item.name}}ve {{item.directory}}.
Ve dizin olarak '/ root' ve isim ('root-machine) olarak' Machine 'varsayarak verileri bir dizin ve ardından ad olarak göstermek istersiniz.
{{[item.directory]+[isLast ? '': '/'] + [ item.name] | limitTo:5}}Bu npm modülünü kullanabilirsiniz: https://github.com/sparkalow/angular-truncate
Kesikli filtreyi uygulama modülünüze şu şekilde enjekte edin:
var myApp = angular.module('myApp', ['truncate']); ve filtreyi uygulamanıza şu şekilde uygulayın:
{{ text | characters:20 }} Bu yönergeyi kolayca yapan, dizeyi belirtilen bir sınıra kesen ve "daha fazla / daha az göster" geçişi ekleyen bu yönergeyi oluşturdum. GitHub'da bulabilirsiniz: https://github.com/doukasd/AngularJS-Components
şu şekilde kullanılabilir:
<p data-dd-collapse-text="100">{{veryLongText}}</p>İşte yönerge:
// 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);
}
});
}
};
}]);Ve onunla gitmek için bazı 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: ')';
}Bu çözüm yalnızca HTML'de ng etiketi kullanıyor .
Çözüm, sonunda 'daha fazla göster ...' bağlantısıyla görüntülenen uzun metni sınırlamaktır. Kullanıcı 'daha fazla göster ...' bağlantısını tıklarsa metnin geri kalanını gösterir ve 'daha fazla göster ...' bağlantısını kaldırır.
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>EN ÇOK ÇÖZÜM -> buldum Malzeme Tasarım (1.0.0-rc4) işi yapmak için izin vermektir. md-input-containerİşi sizin için yapacaktır. Dizeyi birleştirir ve elips ekler, ayrıca tam metni almak için tıklatmanıza izin vermenin ekstra avantajına sahiptir, böylece tüm enchilada olur. Öğesinin genişliğini ayarlamanız gerekebilir 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
}Özel bir Açısal filtreyle sözcük sayısını sınırla: Özel bir filtre kullanarak görüntülenen sözcük sayısını sınırlamak için Açısal bir filtreyi nasıl kullandığım aşağıda açıklanmıştır.
HTML:
<span>{{dataModelObject.TextValue | limitWordsTo: 38}} ......</span>Açısal / Javascript Kodu
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 filterBen yararlı filtre kitaplığı "Açısal filtre" güzel bir set kullanın ve bunlardan biri "kesme" de yararlıdır.
https://github.com/a8m/angular-filter#truncate
kullanımı:
text | truncate: [length]: [suffix]: [preserve-boolean]