Проблема с фильтром диапазона дат Angular JS ng-table

У меня есть список с фильтром диапазона дат, для которого я использую 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.

Есть ли способ отфильтровать данные, используя даты из полей «От» и «По дате»?

Любая помощь/подсказка будет принята с благодарностью.

спасибо джайеш


javascript filter angularjs date-range ngtable
person Jayesh Ambali    schedule 23.09.2014    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Я создал это с помощью средства выбора даты UI-Bootstrap. Посмотрите, решит ли это вашу проблему.

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


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

person Himanshu Jain    schedule 22.12.2015
comment
Я пытался реализовать ваш код, но он у меня не работает. Он показывает undefined для элементов - person User0706; 27.06.2016

arrow_upward
0
arrow_downward

Вы уверены, что ng-model="createdfrom.createddate" прикрепляет какие-либо данные к $scope?

Попробуйте добавить <pre>createdfrom.createddate: {{ createdfrom.createddate }}</pre>, чтобы увидеть, изменяет ли эта директива выбора даты значение в $scope.

РЕДАКТИРОВАТЬ: Проверьте рабочий пример: http://jsfiddle.net/ulfryk/vbvyt8we/

РЕДАКТИРОВАТЬ2:

Я нашел ответ:

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

ты пропустил " после |filter :createdfrom и до > :D

РЕДАКТИРОВАТЬ3:

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">
person ulfryk    schedule 23.09.2014
comment
Кажется, что мой выбор даты вообще не дает дату в правильном формате. Я использовал средство выбора даты начальной загрузки — angular-ui.github.io/bootstrap — когда я выбрал 02.09.2010 в средстве выбора даты выбранная дата отображается следующим образом: createdfrom.createddate: 2010-02-08T18:30:00.000Z Я отформатировал дату средства выбора даты в своем контроллере и он отлично отображает дату в текстовом поле. В чем может быть проблема ? - person Jayesh Ambali; 23.09.2014
comment
Добавлено редактирование ответа - возможно, это просто ошибка HTML - отсутствие " перед > в открывающем теге <tr> .. - person ulfryk; 23.09.2014
comment
Добавлено 3-е редактирование, чтобы ответить на 2-е и 3-е вместе, чтобы все исправить :) - person ulfryk; 23.09.2014
comment
Скопировал часть фильтра, кавычки уже есть. - person Jayesh Ambali; 23.09.2014
comment
Ok. Итак, проверьте третий EDIT. Это должно помочь :) - person ulfryk; 23.09.2014

arrow_upward
0
arrow_downward

Следуя примеру 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;
    };
}]);

})();

person tfa    schedule 15.10.2017