修剪后的 ng-model 如何过滤 Angularjs 结果

Question

我有三个输入框来过滤字段"tradeDate"

<input type="text" placeholder="Date YYYY" ng-model="search.DateYear">

<input type="text" placeholder="Date MM" ng-model="search.DateMonth">

<input type="text" placeholder="Date DD" ng-model="search.DateDay">

数据取自SQL服务器，日期是这样的

{"dayOfMonth":9,"dayOfWeek":"MONDAY","dayOfYear":130, "month":"MAY","monthValue":5,"year":2016,"hour":12,"minute":38,"nano":0,"second":57,"chronology":{"id":"ISO","calendarType":"iso8601"}

所以当我想用 ng-repeat 过滤时，它会像：

<tr ng-repeat="trade in trades|filter:tradeDate.year:search.DateYear,
tradeDate.monthValue:search.DateMonth,tradeDate.dayOfMonth:search.DateDay">

<td>{{trade.blahhblahhField}}</td>
<td>{{trade.blahhblahhField}}</td>
<td>{{trade.tradeDate}}</td>
</tr>

但现在想改成一个输入框(ng-model:search.tradeDate)，格式为"YYYY-MM-DD"。我该如何过滤？

我试过这种方法：

    ng-repeat="trade in trades|filter:tradeDate.year:trimYear(search.tradeDate),
tradeDate.monthValue:trimMonth(search.tradeDate),tradeDate.dayOfMonth:trimDay(search.tradeDate)"

像这样并在 js 中创建 3 个函数到 trim（例如：2016-05-20）

year: 子字符串得到 2016

    $scope.trimYear = function(input){
        var res = input.substring(0,4);
     return res;
  };

month：要得到 5 的子字符串（不是 05，因为数据中的月份值将为 5）

天：子串得到20

但这行不通；我假设它是因为第一次加载它时没有输入。我还是个新手，请问还有其他方法吗？

Answer 1

您可以使用自定义过滤器轻松完成此操作。这是一个如何创建过滤器的示例（我不得不猜测一些东西，所以您可能需要调整它以使其适合您的情况）。在过滤器函数中，input 是来自您的 ng-repeat 的交易列表，而 search 是您拥有 ng-model="search".[=21 的输入的 ng-model 值=]

.filter('customDateFilter', function() {
    return function(input, search) {
        var out = [];
        angular.forEach(input, function(item) {
            if(!search){
                out.push(item);
            } else {
                var year = parseInt(search.substring(0,4));
                var month = parseInt(search.substring(5,7));
                var day = parseInt(search.substring(8,10));
                if(item.tradeDate.year === year && item.tradeDate.monthValue === month && item.tradeDate.dayOfMonth === day){
                    out.push(item);
                }
            }
        });
        return out;
    }
})

这是非常具体的，因此只有在输入完整日期时才会匹配，并且您需要验证用户输入的格式是 YYYY-MM-DD（或者更好的是，使用日期选择器控件）。现在您可以在 HTML:

中使用此过滤器

<tr ng-repeat="trade in trades | customDateFilter: search">

使用那一点 HTML 标记，您将 trades 对象（这是一个交易数组）传递给 customDateFilter 过滤器并传递 ng-model search 到过滤函数。

修剪后的 ng-model 如何过滤 Angularjs 结果

how filter Angularjs result by trimmed ng-model

html

javascript

date

angularjs

angularjs-ng-model