Question

我试图通过其中一个变量是否属于所选日期来过滤ng-repeat中的列表。

我尝试过使用自定义过滤器来做到这一点，但到目前为止还没有任何结果。我试图装配的变量是dd-MM-yyyy HH：mm格式。

HTML

<div>
    <input ng-model="dateFrom" />
    <input ng-model="dateTo"  />
    <div ng-repeat="x in log2 | myfilter:dateFrom:dateTo" > {{x.Name}}  In: {{x.In }} Out: {{x.Out}}</div>
</div>

的Javascript

MyApp.controller("MainController", function MainController($scope, $timeout, $firebaseArray, $filter, $window) {

$scope.log2 = [
    {"Name": "John",
     "In": "10-10-2017 11:42",
     "Out": "10-10-2017 11:55",},
    {"Name": "Rob",
     "In": "10-01-2018 13:03",
     "Out": "10-01-2018 14:30",}
    ]
$scope.dateFrom = "10-10-2000 ";
$scope.dateTo = "10-10-3000 ";

});



MyApp.filter("myfilter", function() {
  return function(items, $scope) {
        var df = $scope.dateFrom;
        var dt = $scope.dateTo;
        var result = [];        
        for (var i=0; i<items.length; i++){
            var tf = new Date(items[i].In ),
                tt = new Date(items[i].Out );
            if (tf > df && tt < dt)  {
                result.push(items[i]);
            }
        }            
        return result;
  };
});

尝试搜索一些东西，到目前为止还没有运气。考虑过使用ISO日期格式，但不确定如何将现有数据转换为角度的ISO格式。

提前感谢您的任何帮助

Answer 1

您可以使用angularjs过滤器和moment.js（库）

轻松实现

请看下面的示例代码：

＆＃13;

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.js"></script>
  <script src="https://code.angularjs.org/1.6.6/angular.js"></script>
  <script>
    var app = angular.module('plunker', []);

    app.controller('MainCtrl', function($scope) {
      $scope.dateFrom = "2017-11-01";
      $scope.dateTo = "2019-08-03";

      $scope.log2 = [{
        "Name": "John",
        "In": "10-10-2017 11:42",
        "Out": "10-10-2018 11:55",
      }, {
        "Name": "Rob",
        "In": "10-01-2018 13:03",
        "Out": "10-01-2018 14:30",
      }]


    });

    app.filter("myfilter", function($filter) {
      return function(items, from, to, dateField) {
        startDate = moment(from);
        endDate = moment(to);

        return $filter('filter')(items, function(elem) {
          var dateIn = moment(elem['In']);
          var dateOut = moment(elem['Out']);
          return (dateIn >= startDate && dateIn <= endDate) || (dateOut >= startDate && dateOut <= endDate);
        });
      };
    });
  </script>
</head>

<body>
  <div ng-controller="MainCtrl">
    
    <input type="text" name="S_Date" ng-model="dateFrom" />
    <input type="text" name="E_Date" ng-model="dateTo" />
    
    
    <div ng-repeat="x in log2 | myfilter:dateFrom:dateTo" > {{x.Name}}  <b>In:</b> {{x.In }} <b>Out:</b> {{x.Out}}</div>
    
  </div>

</body>

</html>

＆＃13;

按日期范围过滤ng-repeat（dd / MM / yyyy HH：mm格式）

1 个答案: