我的智能表中有两个日期列。我有一个自定义的日期过滤器，您可以在下面的导航栏中找到这些列之一，它工作正常。当我想尝试在第二个日期列上使用第二个日期过滤器时，问题就开始了。我修改了我在github上找到的现有插件。在我的案例中，数据与您在此插头上看到的数据非常相似。第二个日期列是周年纪念列
我得到了带有一个日期过滤器的版本，
角度1.6.6
智能表2.1.11
请忽略您在此插头上看到的版本
http://plnkr.co/edit/GGKGbpoiGFccc6xIs38a
(function(ng) {
angular.module('myApp', ['smart-table', 'ui.bootstrap'])
.controller('mainCtrl', ['$scope', function($scope) {
$scope.displayed = [{
firstName: 'Laurent',
lastName: 'Renard',
birthDate: new Date('1987-05-21'),
anniversary: new Date('1999-05-21'),
balance: 102,
email: 'whatever@gmail.com'
},
{
firstName: 'Blandine',
lastName: 'Faivre',
birthDate: new Date('1987-04-25'),
anniversary: new Date('2000-05-21'),
balance: -2323.22,
email: 'oufblandou@gmail.com'
},
{
firstName: 'Francoise',
lastName: 'Frere',
birthDate: new Date('1955-08-27'),
anniversary: new Date('2004-05-21'),
balance: 42343,
email: 'raymondef@gmail.com'
}
];
}])
.directive('stDateRange', ['$timeout', function($timeout) {
return {
restrict: 'E',
require: '^stTable',
scope: {
before: '=',
after: '='
},
templateUrl: 'stDateRange.html',
link: function(scope, element, attr, table) {
var inputs = element.find('input');
var inputBefore = ng.element(inputs[0]);
var inputAfter = ng.element(inputs[1]);
var predicateName = attr.predicate;
[inputBefore, inputAfter].forEach(function(input) {
input.bind('blur', function() {
var query = {};
if (!scope.isBeforeOpen && !scope.isAfterOpen) {
if (scope.before) {
query.before = scope.before;
}
if (scope.after) {
query.after = scope.after;
}
scope.$apply(function() {
table.search(query, predicateName);
})
}
});
});
function open(before) {
return function($event) {
$event.preventDefault();
$event.stopPropagation();
if (before) {
scope.isBeforeOpen = true;
} else {
scope.isAfterOpen = true;
}
}
}
scope.openBefore = open(true);
scope.openAfter = open();
}
}
}])
.directive('stNumberRange', ['$timeout', function($timeout) {
return {
restrict: 'E',
require: '^stTable',
scope: {
lower: '=',
higher: '='
},
templateUrl: 'stNumberRange.html',
link: function(scope, element, attr, table) {
var inputs = element.find('input');
var inputLower = ng.element(inputs[0]);
var inputHigher = ng.element(inputs[1]);
var predicateName = attr.predicate;
[inputLower, inputHigher].forEach(function(input, index) {
input.bind('blur', function() {
var query = {};
if (scope.lower) {
query.lower = scope.lower;
}
if (scope.higher) {
query.higher = scope.higher;
}
scope.$apply(function() {
table.search(query, predicateName)
});
});
});
}
};
}])
.filter('customFilter', ['$filter', function($filter) {
function birthDate(predicate) {
return function(row) {
if (!predicate)
return true;
const before = predicate.before ? new Date(predicate.before) : new Date(Date.now() + 1000000);
const after = predicate.after ? new Date(predicate.after) : new Date(-Math.pow(10, 15));
return row.birthDate <= before && row.birthDate >= after;
}
}
var filterFilter = $filter('filter');
return function(array, expression) {
var standard = Object.assign({}, expression);
delete standard.birthDate;
return filterFilter(array, standard)
.filter(birthDate(expression.birthDate));
}
}]);
})(angular);<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="angular.js@1.4.7" data-semver="1.4.7" src="//code.angularjs.org/1.3.1/angular.js"></script>
<script data-require="ui-bootstrap@0.11.0" data-semver="0.11.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script src="smart-table.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="mainCtrl">
<table st-set-filter="customFilter" st-table="displayed" class="table table-bordered table-striped">
<thead>
<tr>
<th st-sort="firstName">first name</th>
<th st-sort="lastName">last name</th>
<th st-sort="birthDate">birth date</th>
<th st-sort="anniversary">Anniversary</th>
<th st-sort="email">email</th>
<th st-sort="balance">balance</th>
</tr>
<tr>
<th>
<input placeholder="search firstname" st-search="firstName" />
</th>
<th>
<input placeholder="search lastname" st-search="lastName" />
</th>
<th>
<st-date-range predicate="birthDate" before="query.before" after="query.after"></st-date-range>
</th>
<th>
<st-date-range predicate="anniversary" before="query.before" after="query.after"></st-date-range>
</th>
<th></th>
<th>
<st-number-range predicate="balance" lower="query.lower" higher="query.higher"></st-number-range>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in displayed">
<td>{{row.firstName}}</td>
<td>{{row.lastName | uppercase}}</td>
<td>{{row.birthDate | date}}</td>
<td>{{row.anniversary | date}}</td>
<td>{{row.email}}</td>
<td>{{row.balance | currency}}</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</body>
</html>
那么，这怎么了？
如您所见，我是否尝试按周年纪念日或生日来筛选结果，否则未达到预期的结果。当我进行选择时，biratedate中的日期过滤器会自动填充周年日期过滤器，反之亦然！不幸的是，结果集也被过滤了。
我的问题：
您可以拥有多个自定义日期过滤器吗？ ->我是这样认为的，但是我想做的就是变得越来越快。因此，我没有最好的方法来做到这一点？
外面有没有一个可以正常工作的插销示例，可以满足我上面解释的情况。
我在stackoverflow上找不到任何与智能网格自定义日期过滤器有关的问题。
谢谢