使用md-datepicker过滤ng-repeat

时间:2018-02-06 06:32:54

标签: javascript angularjs angularjs-ng-repeat angular-material

我必须使用ng-repeat过滤我的uploadDate项,但无法过滤。我尝试了一切,但总是失败。我希望有人可以帮助我。

控制器

ExtractionService.getUserUploadedData(d).then(function (msg) {
   angular.forEach(msg.data, function (val) {
          var src = val.uploadDate;
          src = src.replace(/[^0-9 +]/g, '');
          var uploadDate = new Date(parseInt(src));
          console.log(uploadDate); //it returns a ISO date string format
          var dd = {
              uploadDate: uploadDate,
              filename: val.filename,
              bch: val.bch,
              Id: val.edmId
          }
          $scope.datalistings.push(dd);
    })             
});

HTML

<md-datepicker ng-model="search.uploadDate" ng-change="search.uploadDate = (search.uploadDate.toISOString())" md-placeholder="Enter Date" md-open-on-focus></md-datepicker>
  

在上面的代码中,我尝试将search.uploadDate模型转换为ISO   使用.toISOString()的字符串日期格式,但无法过滤   导致ng-repeat

<tr ng-repeat="info in filtereddata = (datalistings | filter: {uploadDate:search.uploadDate})" class="animate-repeat">
      <td>{{$index+1}}</td>
      <td>{{info.uploadDate}}</td>
      <td>{{info.filename}}</td>
      <td>{{info.bch}}</td>
</tr>

我也尝试转换info.uploadDate就像这样{{info.uploadDate.toISOString()}}但它也失败了:(任何人都可以帮助我吗?

1 个答案:

答案 0 :(得分:1)

创建一个自定义DateFilter,如下所示

.filter('DateFilter', function() {
    return function(dataArray, uploadDate) {
        if (!dataArray) {
            return;
        } else if (!uploadDate) {
            return dataArray;
        } else {
            return dataArray.filter(function(item) {
                var uploadDateInput = new Date(item.uploadDate);
                if (uploadDate !== null) {
                    var term = (uploadDateInput.getDate() === uploadDate.getDate() && uploadDateInput.getMonth() === uploadDate.getMonth() && uploadDateInput.getYear() === uploadDate.getYear());
                    return term;
                }
            });
        } 
    };
});

ng-repeat | DateFilter : yourinputdate

中使用它
相关问题