Question

有人可以帮助我使用datepicker过滤我的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

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

过滤器：

"tempuri.org/"

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

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
  }
});

Plunker

Angularjs通过datepicker过滤ng-repeat

2 个答案: