Angular1.0.7で単純な{{item.description | limitTo: 10}}が機能しない何らかの理由がありますか？それは全体の記述を示す。コンソールにエラーはありません。 HTMLページにAngularJS 1.0.7：limittoフィルタが動作しない
：
...
<hr class="no-margin-top" />
<div class="row-fluid custom-row-margin-20">
<div class="span12 boat-description">{{boat.description | limitTo: 40}}</div>
</div>
...
元limitToフィルタのみのアレイを支持しました。文字列のサポートがAngular 1.1.12 changelogで追加されました。
角度1.1.12より前では、手動で弦を切断する必要がありました。これを行うためのカスタムディレクティブの例がバグトラッカーに含まれていました。私はここにそれを含める（注記、私によって書かれていない、完全にテストされていない）。
/**
* Usage:
* {{some_text | cut:true:100:' ...'}}
* Options:
* - wordwise (boolean) - if true, cut only by words bounds,
* - max (integer) - max length of the text, cut to this number of chars,
* - tail (string, default: ' …') - add this string to the input
* string if the string was cut.
*/
.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) {
value = value.substr(0, lastspace);
}
}
return value + (tail || ' …');
};
});
だけでなく、私はangularjsの最新バージョンを使用することをお勧めしますが、まだそれは1.0.7で動作するはず
DEMO
var app= angular.module('testApp',[]);
app.controller('testCtrl',function($scope){
$scope.boat ={};
$scope.boat.description ="The length of the returned array or string. If the limit number is positive, limit number of items from the beginning of the source array/string are copied. If the number is negative, limit number of items from the end of the source array/string are copied. The limit will be trimmed if it exceeds array.length. If limit is undefined, the input will be returned unchanged.";
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<hr class="no-margin-top" />
<div class="row-fluid custom-row-margin-20">
<div class="span12 boat-description">{{boat.description | limitTo: 40}}</div>
</div>
</body>EDIT
角度が1.0.7の場合、limitToフィルタは配列のみで動作します。要件に合わせて、カスタムフィルタを実装する必要があります。
.filter("limitToCustom",function(){
return function(actual,number){
console.log(number)
var arrData = actual.split("");
return actualData.slice(-number);
}
});
とHTML
<h1>Hello {{boat.description |limitToCustom : 40 }}!</h1>
角度js 1.2.10を使用してください。
DEMO
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testCtrl">
<div class="row-fluid custom-row-margin-20">
<div class="span12 boat-description">{{boat.description | limitTo: 50}}</div>
</div>
</div>
<script>
var app= angular.module('testApp',[]);
app.controller('testCtrl',function($scope){
$scope.boat ={};
$scope.boat.description ="The length of the returned array or string. If the limit number is positive, limit number of items from the beginning of the source array/string are copied. If the number is negative, limit number of items from the end of the source array/string are copied. The limit will be trimmed if it exceeds array.length. If limit is undefined, the input will be returned unchanged.";
});
</script>
あなたのコードはどこにありますか？ – Sajeetharan
なぜ地獄で最初に角度1.0.7を使用していますか？それは4歳以上です。それ以来数十種類のバグが修正されています。現在のバージョンは1.6.6です。 –
あなたがゼロ価値を提供するあなたのようなスマートなコメントをどこに書いているのかは書かれていません。最新のバージョンに移行するのは単なるクリックかもしれません。私は3年前、最新のバージョンが1.0.7だった私の角ウェブアプリを開発しました。あなたが想像しているように、Angularが新しいバージョンをリリースするたびにWebアプリケーションを移行する時間がありません。 – Rober