回答:
編集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（by @Ehvince）
CSSなしの簡単な1行の修正を次に示します。
{{ myString | limitTo: 20 }}{{myString.length > 20 ? '...' : ''}}'...'：あなたはまた、省略記号のためのHTMLエンティティを使用することができます'…'
私はこれが遅いことを知っていますが、最新バージョンのangularjs（私は1.2.16を使用しています）では、limitToフィルターは文字列と配列をサポートしているため、次のように文字列の長さを制限できます。
{{ "My String Is Too Long" | limitTo: 9 }}出力されます：
My String単純にcssクラスをdivに追加し、angularjsを介してツールチップを追加して、トリミングされたテキストがマウスオーバーで表示されるようにすることができます。
<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。
私は同様の問題がありました、これが私がしたことです：
{{ longString | limitTo: 20 }} {{longString.length < 20 ? '' : '...'}}< div >{{modal.title | limitTo:20}}...< / div>よりエレガントなソリューション：
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
input値が動的な場合にリターンを追加することを提案できますか？つまりif (!input) {return;}、JSコンソールエラーが発生します
オプションがあります
.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
これは、テキストを切り捨てるためのカスタムフィルターです。EpokKのソリューションに触発されましたが、私のニーズと好みに合わせて変更されました。
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 + '...';
};
});そして、これがユニットテストですので、それがどのように振る舞うべきかを見ることができます：
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では、次のように angular自体によって提供されるlimitToフィルターとともに使用されます。
<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;
}
}次のようなものが必要な場合： InputString => StringPart1 ... StringPart2
HTML：
<html ng-app="myApp">
<body>
{{ "AngularJS string limit example" | strLimit: 10 : 20 }}
</body>
</html>角度コード：
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
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に追加できます。これにより、テキストが切り捨てられ、マウスオーバー時にテキスト全体が表示されます。あなたはより多くのテキストを追加し、角度クリックハドラーを追加して、CLIでDIVのクラスを変更することができます
.ellipseContent {
overflow: hidden;
white-space: nowrap;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.ellipseContent:hover {
overflow: visible;
white-space: normal;
}あなたは、2つのバインディングを持っている場合{{item.name}}と{{item.directory}}。
また、ディレクトリとして「/ root」、名前として「Machine」（/ root-machine）を想定して、データをディレクトリの後に名前を付けて表示したいとします。
{{[item.directory]+[isLast ? '': '/'] + [ item.name] | limitTo:5}}このnpmモジュールを使用できます：https : //github.com/sparkalow/angular-truncate
次のように、切り捨てフィルターをアプリモジュールに挿入します。
var myApp = angular.module('myApp', ['truncate']); この方法でアプリにフィルターを適用します。
{{ text | characters:20 }} これを簡単に実行するこのディレクティブを作成し、文字列を指定された制限に切り捨てて、「表示数を増やす/減らす」トグルを追加しました。GitHubで見つけることができます：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: ')';
}このソリューションは純粋にngを使用しています、HTMLでタグをしています。
解決策は、最後に「もっと見る...」リンクを使用して表示される長いテキストを制限することです。ユーザーが[もっと見る...]リンクをクリックすると、残りのテキストが表示され、[もっと見る...]リンクが削除されます。
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>最も簡単なソリューション->私は、マテリアルデザイン（1.0.0-rc4）に作業を任せることを見つけました。md-input-containerあなたのための作業を行います。文字列を連結し、省略記号を追加します。さらに、クリックしてテキスト全体を取得できるため、エンチラーダ全体になります。の幅を設定する必要がある場合があり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
}カスタムAngularフィルターで単語数を制限する：これ は、Angularフィルターを使用して、カスタムフィルターを使用して表示される単語数を制限する方法です。
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私は便利なフィルターライブラリ「Angular-filter」の素敵なセットを使用していますが、そのうちの1つである「truncate」も便利です。
https://github.com/a8m/angular-filter#truncate
使用法は次のとおりです。
text | truncate: [length]: [suffix]: [preserve-boolean]