Angular：過濾空間限制字

我仍然非常學習JS/Angular，所以請簡單:)Angular：過濾空間限制字

我想創建一個limitTo過濾某些數據。這是一串空間分隔的內容，例如：$scope.data = 'foo bar data new code';

我希望用戶能夠將此限制爲一定數量的單詞。讓我們說他們選擇「2」，他們會輸入「2」，輸出將是「foo吧」。

<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

Angular：過濾空間限制字

回答

相關問題