Angularjs 按日期选择器过滤 ng-repeat

Question

有人可以帮助我使用日期选择器过滤我的 ng-repeat 吗？说到这些，我不是专家，而且我仍在学习过程中。非常感谢你的帮助。谢谢。

这是我的 html:

<form style=" text-align: center;">  
    <div class="row">
            <div class="col-xs-6">
                <p class="input-group">
                  <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
                  <span class="input-group-btn">
                    <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
                  </span>
                </p>
            </div>
        </div>

    </form>

        <div class="col-lg-6"  name="in">
            <label>Time In</label>
              <div ng-init="getTime()">
                <div ng-repeat="item in items | filter: date_picker">

                {{item.last_name}}
                {{item.first_name}}
                <input type="checkbox"/> <img src="{{item.pic}}" width="100" height="100"><br>
                {{item.time_only}}
                {{item.date_only}} <br><br>
              </div>
            </div>
        </div>

我的控制器：

function ($scope, $http, $filter, $timeout, $resource, ngTableParams, $modal, time) {


      $scope.items=[];


       $scope.today = function() {
          $scope.dt = new Date();
        };
        $scope.today();

        $scope.clear = function () {
          $scope.dt = null;
        };

        $scope.toggleMin = function() {
          $scope.minDate = $scope.minDate ? null : new Date();
        };
        $scope.toggleMin();

        $scope.open = function($event) {
          $event.preventDefault();
          $event.stopPropagation();

          $scope.opened = true;
        };

        $scope.dateOptions = {
          formatYear: 'yy',
          startingDay: 1
        };

        $scope.formats = [ 'yyyy/MM/dd','dd-MMMM-yyyy', 'dd.MM.yyyy', 'shortDate'];
        $scope.format = $scope.formats[0];




        $scope.getTime = function(){
              time.getTime()
              .success(function(data) {console.log(data);
                    $scope.items = data.items;

                   })
                     .error(function(data, status, headers, config) {
                               console.log('error!');
                   });
        };

Answer 1

从

更改您的代码

<div ng-repeat="item in items | filter: date_picker">

到

<div ng-repeat="item in items | filter: {date_only:dt}">

假设 ng-model=dt 是您的搜索条件，搜索的属性是 item.date_only 并且以上两个对象具有相同的类型（可比）。

查看更多信息https://docs.angularjs.org/api/ng/filter/filter

Answer 2

您可以创建一个自定义过滤器，将您在日期选择器中选择的任何一天作为参数。从那里你需要为你从日期选择器获得的日期对象设置时间（因为它 returns 任何日期与当前时间）以便它创建从午夜到 11:59PM 的范围。

过滤器：

app.filter('dayFilter', function() {

  return function(items, date) {
    var filtered = [];
    var begin, end

    begin = date.setHours(0,0,0);
    end = date.setHours(23,59,59);
    angular.forEach(items, function(item) {
        if(item > begin && item < end) {
          filtered.push(item)
        }
    })
    return filtered
  }
});

然后将过滤器应用于您的 ng-repeat：

<ul>
  <li ng-repeat="d in data | dayFilter:day">{{d}}</li>
</ul>

Plunker

Angularjs 按日期选择器过滤 ng-repeat

Angularjs filter ng-repeat by datepicker

angularjs

datepicker

angularjs-filter