Question

我有一个日期范围过滤器列表，我使用ng-table。我可以使用ng-table轻松过滤名称和其他字符串/数字字段。但日期范围过滤器似乎不起作用。

我的json数据列表

{  
   "data":[  
      {  
         "cellphone":"24234234234",
         "createddate":"09/09/2014",
         "firstname":"Giacomo",
         "resellerid":"747845473"
      },
      {  
         "cellphone":"24234234234",
         "createddate":"09/02/2010",
         "firstname":"Tomy",
         "resellerid":"747783"
      },
      {  
         "cellphone":"999999",
         "createddate":"09/02/2010",
         "firstname":"Sunny",
         "resellerid":"2312312"
      }
   ]
}

我使用ng-repeat来遍历这个json对象。

过滤箱在桌子外面，我使用以下代码

 <table class="table display table-striped table-bordered" ng-table="tableParams">

                <tr ng-repeat="customer in $data | filter: id | filter :name 
              |filter :createdfrom>
                <td data-title="'Reseller ID'" sortable="'resellerid'">
                {{customer.resellerid}}
                </td>
                <td data-title="'Reseller Name'" sortable="'firstname'">
                {{customer.firstname}} {{customer.lastname}}
                </td>
                <td data-title="'Created Date'" sortable="'createddate'">
                {{customer.createddate}}
                </td>
                </tr>
  </table>

并在表格外的过滤器框中

                  <div class="col-sm-2">
                        <input type="text" placeholder="747873" id="exampleInputEmail2"
                            class="form-control" ng-model="id.resellerid">
                    </div>
                    <div class="col-sm-2">
                        <input type="text" placeholder="Enter Name"
                            id="exampleInputPassword2" class="form-control"
                            ng-model="name.firstname">
                    </div>
                    <input  class="form-control" type="text"
                                datepicker-popup="{{format}}" ng-model="createdfrom.createddate"  is-open="opened1" 
                                min-date="minDate" max-date="'2015-06-22'"  datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true"
                                close-text="Close" placeholder="DD/MM/YY" id="date1" > 
                                <span
                                class="input-group-btn">
                                <button type="button" class="btn btn-default"
                                    ng-click="open1($event)">
                                    <i class="glyphicon glyphicon-calendar"></i>
                                </button>
                            </span>
                        </div>

但是日期字段没有过滤json数据。

有没有办法使用＆＃34; From＆＃34;中的日期过滤数据？和日期字段？

非常感谢任何帮助/提示。

由于 jayesh

Answer 1

我使用UI-Bootstrap日期选择器创建了这个。看看这是否能解决您的问题。

＆＃13;

// Code goes here

var myapp = angular.module('NgTableExample', ['ngAnimate', 'ui.bootstrap', 'ngTable']);

function parseDate(input) {
  return Date.parse(input);
}

myapp.filter("dateRangeFilter", function() {
  return function(items, from, to) {
    var df = parseDate(from);
    var dt = parseDate(to);
    var result = [];
    for (var i = 0; i < items.length; i++) {
      var date_bet = items[i].datetime;
      if (date_bet > df && dt > date_bet) {
        result.push(items[i]);
      }
    }
    return result;
  };
});

myapp.controller("ExampleCtrl", function($scope, $filter, NgTableParams) {

  var self = this;
  var data = [{
    name: "Moroni",
    age: 50,
    datetime: 1450562394000
  }, {
    name: "Simon",
    age: 43,
    datetime: 1450562394000
  }, {
    name: "Jacob",
    age: 27,
    datetime: 1450648794000
  }, {
    name: "Nephi",
    age: 29,
    datetime: 1450648794000
  }, {
    name: "Christian",
    age: 34,
    datetime: 1450475994000
  }, {
    name: "Tiancum",
    age: 43,
    datetime: 1450475994000
  }, {
    name: "Jacob",
    age: 27,
    datetime: 1450475994000
  }];

  self.sensorTableData = new NgTableParams({
    count: 7
  }, {
    dataset: data
  });

  $scope.today = function() {
    $scope.dt2 = new Date(2015, 11, 26);
    $scope.dt1 = new Date(2015, 11, 17);

  };



  $scope.today();
  $scope.toggleMin = function() {
    $scope.minDate = $scope.minDate ? null : new Date();
  };
  $scope.toggleMin();
  $scope.maxDate = new Date(2020, 5, 22);

  $scope.open1 = function($event) {
    $scope.status1.opened = true;
  };

  $scope.open2 = function($event) {
    $scope.status2.opened = true;
  };

  $scope.setDate = function(year, month, day) {
    $scope.dt1 = new Date(year, month, day);
    $scope.dt2 = new Date(year, month, day);

  };

  $scope.dateOptions = {
    formatYear: 'yy',
    startingDay: 1
  };

  $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
  $scope.format = $scope.formats[0];

  $scope.status1 = {
    opened: false
  };

  $scope.status2 = {
    opened: false
  };


});

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap-css@*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
  <link rel="stylesheet" href="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.css">
  <script src="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="NgTableExample">
  <h1>Date Range Filter For Ng-table!</h1>

  <div ng-controller="ExampleCtrl as exc">
    <h4>From Date</h4>
    <p class="input-group">
      <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt1" is-open="status1.opened" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
      <span class="input-group-btn">
          <button type="button" class="btn btn-default" ng-click="open1($event)"><i class="glyphicon glyphicon-calendar"></i></button>
        </span>
    </p>
    <h4>To Date</h4>
    <p class="input-group">
      <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt2" is-open="status2.opened" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
      <span class="input-group-btn">
          <button type="button" class="btn btn-default" ng-click="open2($event)"><i class="glyphicon glyphicon-calendar"></i></button>
        </span>
    </p>

    <div>
      <table ng-table="exc.sensorTableData" class="table table-condensed table-bordered table-striped">
        <tr ng-repeat="row in $data | dateRangeFilter:dt1:dt2">
          <td data-title="'Name'" sortable="'name'">{{row.name}}</td>
          <td data-title="'Age'" sortable="'age'">{{row.age}}</td>
          <td data-title="'Date'" sortable="'age'">{{row.datetime | date:'dd-MMMM-yyyy'}}</td>
        </tr>
      </table>
    </div>
  </div>
</body>

</html>

＆＃13;

Answer 2

您确定ng-model="createdfrom.createddate"是否将任何数据附加到$ scope？

尝试添加<pre>createdfrom.createddate: {{ createdfrom.createddate }}</pre>以查看该datepicker指令是否更改$ scope中的值。

编辑：查看工作示例：http://jsfiddle.net/ulfryk/vbvyt8we/

EDIT2：

我找到了答案：

<tr ng-repeat="customer in $data | filter: id | filter :name 
          |filter :createdfrom>

您在"之后和|filter :createdfrom之前错过了>：D

EDIT3：

datepicker在模型中保存Date类型的值，并在视图层中显示格式为String的表示形式。所以你可能需要一些其他的指令或过滤器来将模型数据转换为格式化的字符串，或者将视图值传递给模型中的其他字段：

yourModule.directive('viewValueModel', [
    '$parse',
    function ($parse) {
        return {
            require: 'ngModel',
            link: function (scope, element, attrs, ngModelCtrl) {
                ngModelCtrl.$viewChangeListeners.push(function () {
                    $parse(attrs.viewValueModel).assign(scope, ngModelCtrl.$viewValue);
                });
            }
        };
    }
]);

并像这样使用它：

<input
    class="form-control"
    type="text"
    datepicker-popup="{{format}}"

    ng-model="someFakeModelPlaceholder"
    view-value-model="createdfrom.createddate"

    is-open="opened1"
    min-date="minDate"
    max-date="'2015-06-22'"
    datepicker-options="dateOptions"
    date-disabled="disabled(date, mode)"
    ng-required="true"
    close-text="Close"
    placeholder="DD/MM/YY"
    id="date1">

Answer 3

跟随Himanshu Jain的例子，我不得不调整它以使其正常工作。

(function () {
'use strict';
angular.module('app').filter("dateRangeFilter", ['$filter', function ($filter) {
    return function (items, from, to) {
        var df = from;
        var dt = to;
        var result = [];
        for (var i = 0; i < items.length; i++) {
            var date_bet = parseDate(items[i].StartDate);
            if (date_bet >= df && dt >= date_bet) {
                result.push(items[i]);
            }
        }
        return result;
    };
}]);

}）（）;

Angular JS ng-table日期范围过滤器问题

3 个答案: