Question

我最近开始使用AngularJS，并且遇到了这个问题。我正在使用Angular Filter对象过滤列表。一切正常，但是我希望能够输入日期值来过滤日期列。问题是，来自我的Web服务的日期（当然）的格式不同于显示的日期。

这里是一个例子：
查看：

Name: <input type="text" ng-model="search.Name"><br>
Date: <input type="text" ng-model="search.Date"><br>
<table>
  <tr ng-repeat="item in filtered = (list | filter:search)">
    <td>{{item.Name}}</td>
    <td>{{item.Date | date:'dd-MM-yyyy'}}</td>
  </tr>
</table>

控制器：

app.controller('MainCtrl', function($scope) {
  $scope.list = [{
      Name: "Item1",
      Date: "2018-08-06T13:43:11.82Z"
    },{
      Name: "Item2",
      Date: "2018-08-05T13:43:11.82Z"
    },{
      Name: "Item3",
      Date: "2018-08-04T13:43:11.82Z"
    },{
      Name: "Item4",
      Date: "2018-08-03T13:43:11.82Z"
    }
  ];

    $scope.search = {};
    $scope.$watch('search', function (newVal, oldVal) {
      $scope.filtered = filterFilter($scope.list, newVal);
    }, true);
});

工作示例： http://plnkr.co/edit/O7j1DAzoxArHK4mnjyeP?p=info

如何更改此设置，以便可以按格式输入日期值？

Answer 1

在这种情况下，您应该创建custom过滤器：

angular.module('plunker', []).controller('MainCtrl', function($scope) {
  $scope.list = [{
    Name: "Item1",
    Quantity: 21,
    Date: "2018-08-06T13:43:11.82Z"
  }, {
    Name: "Item2",
    Quantity: 20,
    Date: "2018-08-05T13:43:11.82Z"
  }, {
    Name: "Item3",
    Quantity: 31,
    Date: "2018-08-04T13:43:11.82Z"
  }, {
    Name: "Item4",
    Quantity: 25,
    Date: "2018-08-03T13:43:11.82Z"
  }];

  $scope.search = {};
}).filter('custom', function() {
  return function(array, search) {
    function Norm(x) {
      return (x + '').toLocaleLowerCase();
    }

    return array.filter(function(x) {
      for (var prop in search) {
        if (prop != 'Date' && search[prop] &&
          Norm(x[prop]).indexOf(Norm(search[prop])) == -1)
          return false;
      }
      if (x.Date) {
        var formatted = x.Date.substring(0, 10).split('-').reverse().join('-');
        if (search.Date && !formatted.startsWith(search.Date))
          return false;
        return true;
      }
    });
  }
});

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>

<body ng-app='plunker' ng-controller="MainCtrl">
  Name: <input type="text" ng-model="search.Name">
  <br> Quantity: <input type="text" ng-model="search.Quantity">
  <br> Date: <input type="text" ng-model="search.Date">
  <br>
  <table>
    <tr ng-repeat="item in list | custom : search | orderBy : 'Quantity'">
      <td>{{item.Name}}</td>
      <td>{{item.Quantity}}</td>
      <td>{{item.Date | date:'dd-MM-yyyy'}}</td>
    </tr>
  </table>
</body>

Answer 2

HTML：

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <meta charset="utf-8" />
    <title>AngularJS</title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
    <script src="app.js"></script>
  </head>
  <body ng-controller="MainCtrl">
    Name:
    <input type="text" ng-model="search.Name">
    <br>
    Date:
    <input type="text" ng-model="search.Date">
    <table>
      <tr ng-repeat="item in list2 | filter : search.Date">
        <td>{{item.Name}}</td>
        <td>{{item.Date}}</td>
      </tr>
    </table>
  </body>
</html>

Js：

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

app.controller('MainCtrl', function($scope, $filter) {
  const list = [{
    Name: "Item1",
    Date: "2018-08-06T13:43:11.82Z"
  },{
    Name: "Item2",
    Date: "2018-08-05T13:43:11.82Z"
  },{
    Name: "Item3",
    Date: "2018-08-04T13:43:11.82Z"
  },{
    Name: "Item4",
    Date: "2018-08-03T13:43:11.82Z"
  }
    ];
  $scope.list2 = list.map(x => ( 
      { 
        Name: x.Name, 
        Date: $filter('date')(x.Date, 'dd-MM-yyyy')
      })
    );
});

筛选格式化的日期字段

2 个答案: