Как я могу применить пользовательский фильтр к ng-repeat только тогда, когда в текстовом поле есть значение?

0

У меня есть массив, который я пытаюсь фильтровать. У меня есть несколько фильтров, но один из них - это фильтрация объектов, которые не попадают в течение нескольких лет, указанных пользователем. Вот 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);
}

Заранее спасибо!

Теги:

3 ответа

1

Я думаю, что этот будет работать для вас: рабочая скрипка

Дело в том, что вам не нужно заранее устанавливать 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)
);
  • 0
    Могу ли я спросить, что делает regObj.test ()?
0

Я использовал альтернативный подход для решения этой проблемы. Я написал пользовательский фильтр, который будет принимать начальный год и конец года, а затем отфильтровать годы между ними. Проверьте эту скрипку здесь.

Фильтр

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>
0

Это обрабатывает все 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);
     }
  • 0
    Эта функция обрабатывает все четыре случая: 1) когда установлены минимальное и максимальное значения
  • 0
    Это здорово! Спасибо!
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню