角：スペースで単語を制限するフィルタ

私はまだJS /角度を学んでいますので、簡単にしてください:)角：スペースで単語を制限するフィルタ

特定のデータに対してlimitToフィルタを作成しようとしています。これはスペースで区切られた内容の文字列です：$scope.data = 'foo bar data new code';

私は、これを特定の数の単語に制限できるようにしたいと思います。「2」を選択し、「2」を入力し、出力は「foo bar」となります。

<body ng-controller="MainCtrl"> 
<input ng-model="quantity"> 
<p>{{name| spaced:quantity}}</p> 
</body>

離間フィルタ

が故に空間で分割し、ユーザが入力した、または量単語の印刷のみを所望の数になります。

私はスペーシング用のフィルタを作成する必要がありますが、開始方法は分かりません。これまでの試みです：https://jsfiddle.net/nick_1002/fk2qvmrs/3/

多くの感謝！

出典

2016-11-19 o1n3n21

質問は明確ではない..です – Aravind

精巧てください申し訳ありませんが、私はちょうど今、編集中に、それはもう少し明確にしてみました。 – o1n3n21

まず、フィルタで関数を返す必要があります。

この関数はフィルタ処理された出力を返す必要があります。制限が設定されていない場合

機能単語の配列に文字列を分割することになる、次いでワード限界サイズにアレイのサイズを削減し、新しい文字列を返すために、アレイに参加したり、元に戻す

angular.module('filters', []). 
filter('spaced', function() { 
    // return the function that does the filtering 
    return function(str, limit) { 
    if (limit) { 
     return str.split(' ').splice(0, limit).join(' '); 
    } else { 
     // if limit not set or is zero return original string 
     return str; 
    } 
    } 
});

DEMO

出典

2016-11-19 19:46:09 charlietfl

完璧、ありがとう！ – o1n3n21

HTML：

<body ng-app="myApp"> 
<div ng-controller="MainCtrl"> 

    <input type="number" ng-model="spaceLimit" /> 
    <h2>{{data | spaceFilter:" ": spaceLimit}}</h2> 

</div> 
</body>

はJavaScript：

var app = angular.module('myApp', []); 

app.controller('MainCtrl', function($scope) { 
    $scope.data = 'foo bar data new code'; 
    $scope.spaceLimit = 3; 

}); 


app.filter('spaceFilter', function() { 
    return function(str,filterOn,limit) { 
    if (limit) { 
     return str.substring(0, str.split(filterOn, limit).join(filterOn).length); 
    } else { 
     return str; 
    } 
    } 
});

出典

2016-11-19 19:50:11 sreeramu

デモコードは回答と同じではありません – charlietfl

は答えを更新しました。 – sreeramu

ありがとう – o1n3n21

角：スペースで単語を制限するフィルタ

答えて

関連する問題