2016-11-19 3 views
0

Я до сих пор очень много обучения 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/

Большое спасибо!

+0

вопрос не ясно .. пожалуйста пояснительный – Aravind

+0

К сожалению, я попытался сделать его немного более ясным в редактировании только сейчас. – o1n3n21

ответ

1

Сначала вам нужно вернуть функцию в фильтр.

Эта функция должна возвращать отфильтрованный выход.

Функция будет разбить строку в массив слов, а затем уменьшить размер массива, чтобы ограничить размер слова, и присоединиться к массиву вернуть новую строку или вернуть оригинал, если лимит не установлен

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

+0

Отлично, спасибо! – o1n3n21

0

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; 
    } 
    } 
}); 
+0

демо-код не такой же, как ответ – charlietfl

+0

обновил ответ. – sreeramu

+0

Большое спасибо за это – o1n3n21

Смежные вопросы