AngularJS如何实现基于月份名称/年份的自定义列表过滤？

当然可以实现这个需求！你有两种非常实用的方式来搞定这个多维度搜索的场景，我结合你现有的代码给你一步步拆解：

方案一：使用自定义过滤函数 #

这种方式适合逻辑简单、只在当前控制器内使用的场景，直接在$scope里定义一个过滤函数，把每个项的月份转成名称后再和搜索词匹配：

首先修改你的控制器代码，注入$filter服务并添加过滤函数：

// 记得在控制器注入$filter
app.controller('YourController', ['$scope', '$filter', function($scope, $filter) {
  $scope.monthYr = [
    {month:"1", year: "2014"},
    {month:"2", year: "2015"},
    {month:"3", year: "2016"}
  ];

  $scope.searchTerm = '';

  // 自定义过滤函数
  $scope.filterMonthYear = function(item) {
    // 调用已有的monthName过滤器转换月份
    const monthName = $filter('monthName')(item.month);
    // 拼接成和页面展示一致的格式
    const fullDisplayText = `${monthName} (${item.year})`;
    
    // 搜索词为空时返回所有项，否则做不区分大小写的匹配
    if (!$scope.searchTerm.trim()) return true;
    return fullDisplayText.toLowerCase().includes($scope.searchTerm.trim().toLowerCase());
  };
}]);

// 你已有的monthName过滤器
app.filter('monthName', [function() {
  return function (monthNumber) {
    var monthNames = [ 
      'January', 'February', 'March',
      'April', 'May', 'June',
      'July', 'August', 'September',
      'October','November', 'December' 
    ];
    return monthNames[monthNumber - 1];
  }
}]);

然后修改HTML，添加搜索输入框并在ng-repeat中使用这个过滤函数：

<input type="text" ng-model="searchTerm" placeholder="搜索月份/年份（比如March或2016）">

<div ng-repeat="item in monthYr | filter:filterMonthYear">
  {{item.month | monthName}} &nbsp;({{item.year}})
</div>

方案二：自定义可复用搜索过滤器 #

如果这个搜索逻辑需要在多个页面或控制器复用，推荐把它封装成一个独立的过滤器，依赖你已有的monthName过滤器：

// 自定义搜索过滤器，依赖monthName和$filter
app.filter('searchMonthYear', ['$filter', function($filter) {
  return function(items, searchTerm) {
    // 无搜索词时直接返回所有项
    if (!searchTerm || !searchTerm.trim()) return items;
    
    const lowerSearch = searchTerm.trim().toLowerCase();
    // 遍历数组，匹配月份名称、年份或完整格式
    return items.filter(item => {
      const monthName = $filter('monthName')(item.month);
      const fullText = `${monthName} (${item.year})`.toLowerCase();
      
      return fullText.includes(lowerSearch) || 
             monthName.toLowerCase().includes(lowerSearch) ||
             item.year.toLowerCase().includes(lowerSearch);
    });
  };
}]);

// 你已有的monthName过滤器保持不变
app.filter('monthName', [function() {
  return function (monthNumber) {
    var monthNames = [ 
      'January', 'February', 'March',
      'April', 'May', 'June',
      'July', 'August', 'September',
      'October','November', 'December' 
    ];
    return monthNames[monthNumber - 1];
  }
}]);

对应的HTML使用方式：

<input type="text" ng-model="searchTerm" placeholder="搜索月份/年份...">

<div ng-repeat="item in monthYr | searchMonthYear:searchTerm">
  {{item.month | monthName}} &nbsp;({{item.year}})
</div>

两种方案都支持用户输入月份名称（比如March）、年份（比如2016）或者完整格式（比如March (2016)），而且都是不区分大小写的匹配，体验更友好。

内容的提问来源于stack exchange，提问作者Abhinandan Khilari