将对象属性数组传递给过滤器答案

【问题标题】：Pass array of object properties to filter将对象属性数组传递给过滤器
【发布时间】：2014-03-07 16:33:22
【问题描述】：

我有一个自定义角度过滤器，我正在尝试使其更通用。过滤器会查找员工的集合，并根据他们被雇用后的月数来过滤列表。我正在尝试使过滤器更通用，以便可以在具有日期但具有不同属性名称的其他列表上使用它（例如：过滤在过去 xx 个月内创建的发票）。如何传入要过滤的属性的名称，或者如何传入仅包含日期属性而不是整个对象的集合？

html

<html  ng-app="dateFilterTest">
    <head>

    </head>
    <body ng-controller="filterController">
        <select ng-model="maxLookBack">
            <option value="6">6 Months</option>
            <option value="12" selected="selected">1 Year</option>
            <option value="24">2 Year</option>
            <option value="999">All</option>
        </select>
        <ul>
            <li ng-repeat="person in people | DateAgeFilter:maxLookBack">{{person.name}}</li>
        </ul>
    </body>

    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/controllers/dateFiltercontroller.js"></script>
</html>

var app = angular.module('dateFilterTest', []);

app.filter('DateAgeFilter', function(){
    return function(items, maxage) {

        var minDate = new Date()
        minDate.setMonth(minDate.getMonth() - maxage);

        var result = [];
        for (var i=0; i<items.length; i++) {
          if (items[i].hireDate.getTime() > minDate.getTime()) {
            result.push(items[i]);
          }
        }

        return result;
    };
});

app.controller('filterController', function($scope){
    $scope.people = [
        {'name': 'Person 1',
         'hireDate': new Date('Jun 1, 2013')},
        {'name': 'Person 2',
         'hireDate': new Date('Aug 1, 2012')},
        {'name': 'Person 3',
         'hireDate': new Date('May 1, 2011')},
        {'name': 'Person 4',
         'hireDate': new Date('Jun 1, 2012')},
        {'name': 'Person 5',
         'hireDate': new Date('Mar 1, 2014')},
        {'name': 'Person 6',
         'hireDate': new Date('Mar 1, 2014')},
    ];
});

plunker：

http://plnkr.co/edit/9zOWxJdMNg5zHz7qYf7c

【问题讨论】：

标签： angularjs angularjs-filter

【解决方案1】：

您可以将属性名称作为附加参数传递给过滤器 - 就像这样（使用附加的冒号分隔符）：

DateAgeFilter:maxLookBack:'hireDate'

以下是更改过滤器以利用它的示例，其中有 2 处更改：

1) 附加参数——我在这里称它为field。

2）为了使用参数指定属性，我们从点表示法切换到括号表示法-将items[i].hireDate.getTime()更改为items[i][field].getTime()

app.filter('DateAgeFilter', function(){
  return function(items, maxage, field) {

    var minDate = new Date()
    minDate.setMonth(minDate.getMonth() - maxage);

    var result = [];
    for (var i=0; i<items.length; i++) {
      if (items[i][field].getTime() > minDate.getTime()) {
        result.push(items[i]);
      }
    }

    return result;
  };
});

updated plunker

【讨论】：