如何仅在文本字段中有值时才将自定义过滤器应用于 ng-repeat

How can I apply a custom filter to ng-repeat only when there is a value in the textfield?

本文关键字：自定义 过滤器 ng-repeat 应用于 何仅 文本 字段      更新时间：2023-09-26

我有一个数组，我正在尝试过滤。 我使用了几个过滤器，但其中一个是过滤掉不在用户指定的年份范围内的对象。这是 HTML

<input type="text" ng-model="minYear" placeholder="Start Year">
<input type="text" ng-model="maxYear" placeholder="End Year">

这是 ng 重复

<img ng-src="{{pic.imgPath}}" ng-repeat="pic in pictures 
  | orderBy : 'title' | filter:{other filters} | filter:yearFilterFunction"/>

这是我用来过滤的yearFilterFunction。请注意，当存在值时，这有效。因此，如果图片来自 2001 年，并且您输入 2000 年作为最小年份，2005 年用于最大年份，它将显示。但是当页面加载时，这些值中没有任何内容....数组中的任何内容都不会显示在重复中。 我事先尝试声明这些变量，但是当用户进入并在这两个输入中看到 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，但是当用户键入任何内容并将该值擦除为空时，模型值将更改为"。所以正则表达式将非常适合这种情况： 

$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)
);

这将处理所有 4 种情况1） 当两者都设置时2）仅设置最小年份时3）当只设置最大年份时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);
     }

我使用了另一种方法来解决这个问题。我编写了一个自定义过滤器，它将接受开始年份和结束年份，然后过滤掉它们之间的年份。在这里检查这个小提琴。

滤波器 

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>
相关文章：