У меня есть массив, который я пытаюсь фильтровать. У меня есть несколько фильтров, но один из них - это фильтрация объектов, которые не попадают в течение нескольких лет, указанных пользователем. Вот HTML
<input type="text" ng-model="minYear" placeholder="Start Year">
<input type="text" ng-model="maxYear" placeholder="End Year">
Вот нг-повтор
<img ng-src="{{pic.imgPath}}" ng-repeat="pic in pictures
| orderBy : 'title' | filter:{other filters} | filter:yearFilterFunction"/>
Вот функция yearFilter, которую я использую для фильтрации. И обратите внимание, что это работает, когда есть значения. Так что если картина была с 2001 года, и вы добавили в 2000 году для minYear и 2005 для maxYear, это покажет. Но когда страница загружается, и в этих значениях ничего нет... ничего в массиве не появляется в повторе. Я пробовал объявлять эти переменные заранее, но тогда это выглядит забавно, когда пользователь входит и видит 1900 и 2016 в этих двух входах. Вот Javascript
$scope.minYear = 1900;
$scope.maxYear = 2016;
$scope.yearFilterFunction = function(picture){
return (picture.year >= $scope.minYear && picture.year <= $scope.maxYear);
}
Заранее спасибо!
Я думаю, что этот будет работать для вас: рабочая скрипка
Дело в том, что вам не нужно заранее устанавливать minYear
и maxYear
, поэтому в начале значение будет считаться undefined
, но когда пользователь maxYear
что-либо и стирает это значение для пустого, значение модели будет изменено на ''. Таким образом, регулярное выражение удовлетворит эту ситуацию довольно хорошо:
$scope.yearFilterFunction = function(picture){
var regObj = new RegExp('[0-9]+');
return (
(!regObj.test($scope.minYear) || picture.year >= $scope.minYear)
&& (!regObj.test($scope.maxYear) || picture.year <= $scope.maxYear)
);
Я использовал альтернативный подход для решения этой проблемы. Я написал пользовательский фильтр, который будет принимать начальный год и конец года, а затем отфильтровать годы между ними. Проверьте эту скрипку здесь.
Фильтр
myApp.filter("yearFilter", function() {
return function(years, startYear, endYear) {
var filteredYears = years;
if (!isNaN(startYear)) {
filteredYears = _.filter(filteredYears, function(year) {
return year >= startYear;
});
}
if (!isNaN(endYear)) {
if (isNaN(startYear) || (parseInt(startYear) < parseInt(endYear))) {
filteredYears = _.filter(filteredYears, function(year) {
return year <= endYear;
});
}
}
return filteredYears;
}
});
В основном фильтр проверяет, является ли ваш начальный год/конец года числом, и на основе этого будет выполняться фильтрация. Он также будет обрабатывать ситуации, когда действителен только начальный или конечный год. Я предположил сценарий, где, если конечный год меньше, чем в начале года, он будет фильтроваться только к началу года.
HTML
<input type="text" ng-model="minYear" placeholder="Start Year">
<input type="text" ng-model="maxYear" placeholder="End Year">
<div ng-repeat="year in years | yearFilter: minYear: maxYear">
{{year}}
</div>
Это обрабатывает все 4 случая 1), когда оба установлены 2), когда установлен только minYear 3), когда установлен только maxYear 4), когда оба не установлены. В этом случае отобразите все
$scope.yearFilterFunction = function(picture){
return
($scope.minYear && $scope.maxYear && picture.year >= $scope.minYear && picture.year <= $scope.maxYear) ||
($scope.minYear && !scope.maxYear && picture.year >= $scope.minYear) ||
($scope.maxYear && !scope.minYear && picture.year <= $scope.maxYear) ||
(!$scope.maxYear && !scope.minYear);
}