angularJS: фильтровать данные JSON по диапазону дат

Я совершенно новичок в AngularJS. Вот мой HTML-код

<div ng-controller="DateRangeCtrl">

      <div class="container">
        <div class="form-horizontal">
          <input type="text" datepicker-popup="MM-dd-yyyy" ng-model="dt1" is-open="opened1" max="maxFromDate" ng-change="setMinToDate()"/>
          <button class="btn btn-sm" ng-click="open1($event)"><span class="glyphicon glyphicon-calendar"></span></button>
        </div>
        <div class="form-horizontal">
            <input type="text" datepicker-popup="MM-dd-yyyy" ng-model="dt2" is-open="opened2" min="minToDate" max="maxToDate" ng-change="filterDateAdded()"/>
            <button class="btn btn-sm" ng-click="open2($event)"><span class="glyphicon glyphicon-calendar"></span></button>
        </div>

        <p><strong>Selected From Date: </strong> {{dt1 | date:'mediumDate'}}</p>
        <p><strong>Selected To Date: </strong> {{dt2 | date:'mediumDate'}}</p>
      </div>
      <hr />
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>ID</th>
            <th>Date Added</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="item in items | orderBy:mySortFunction ">
            <td>{{item.ID}}</td>
            <td>{{ parseDate(item.dateAdded) | date:'longDate'}}</td>
          </tr>
        </tbody>
      </table>

    </div>

Ниже приведен мой угловой код:

testApp.config(function (datepickerConfig, datepickerPopupConfig) {
          datepickerConfig.showWeeks = false;
          datepickerPopupConfig.showButtonBar = false;
    });  

    testApp.controller('DateRangeCtrl', function($scope) {

        $scope.items = [
          {ID: "1", dateAdded: "01-04-2013"},
          {ID: "2", dateAdded: "12-01-2013"},
          {ID: "3", dateAdded: "12-31-2013"},
          {ID: "4", dateAdded: "01-12-2014"},
          {ID: "5", dateAdded: "03-04-2014"}

        ];

        $scope.parseDate = function(input){
            var parts = input.split('-');
            var newParts = new Date(parts[2], parts[0]-1, parts[1]); // Note: months are 0-based
            return newParts;
        }


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

        $scope.opened1 = true;
       };

      $scope.maxFromDate = new Date();

      $scope.maxToDate = new Date();

      $scope.setMinToDate = function (){
        $scope.dt2 = null;
        $scope.minToDate = $scope.dt1;
      };

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

      $scope.opened2 = true;
      };
    });

Как отфильтровать строки по выбранным датам? Например, если я выберу "01/01/2014" в "From" datePicker, тогда я смогу увидеть все строки, чей столбец "Date Added" имеет значение больше, чем "1 января 2014". На выходе будут строки с ID: 4 и 5.

Он должен вести себя буквально эквивалентным образом, когда выбран "To" datePicker.

Пожалуйста, помогите мне. Я застрял!

Обновление: HTML

<tr ng-repeat="item in items | filter:dateFilter ">

JS

$scope.dateFilter = function (item) {
          return (item.dateAdded < $scope.dt2);
      };

Я делаю что-то не так? Все равно не работает....


person spyderReloaded    schedule 25.03.2014    source источник
comment
PS: я не хочу использовать jQuery :)   -  person spyderReloaded    schedule 25.03.2014


Ответы (2)


Каким-то методом проб и ошибок я в конце концов понял это правильно. Проблема заключалась в том, что строку «item.dateAdded» нужно было преобразовать в объект Date. Решение заключается в добавлении следующего фрагмента кода в файл js:

$scope.filterDateAdded = function (){
if($scope.dt1 != null)
{
  $scope.dateFilter = function (item) {
    return ($scope.parseDate(item.dateAdded) >= $scope.dt1 && $scope.parseDate(item.dateAdded) <= $scope.dt2);
  };
}

};

Ваше здоровье!

person spyderReloaded    schedule 26.03.2014

Измените свой код следующим образом

    <input type="text" datepicker-popup="MM-dd-yyyy" ng-model="dt2" is-open="opened2" min="minToDate" max="maxToDate" ng-model="search" ng-change="filterDateAdded()"/>


     <tr ng-repeat="item in items | filter:dateFilter">



 $scope.filterDateAdded=function()
    {

                 $scope.dateFilter = function () {
                  var result=[];
                   for(var i in $scope.item)
                    {  if($scope.item[i].dateAdded >$scope.search)
                           {
                                   result.push($scope.item[i]);
                                 }

                           }
              return result;
          };
    }
person Murugan Pandian    schedule 25.03.2014
comment
спасибо Муруган! но как определить фильтр поиска? Не могли бы вы уточнить? - person spyderReloaded; 25.03.2014
comment
см. nd-model = search, когда вы выбираете данные, эта дата возврата модели поиска, а затем использование функции фильтра в intems - person Murugan Pandian; 25.03.2014
comment
элементы содержат объект означает, что ваши данные, поэтому отфильтруйте, выберите связанные данные из этого объекта (элемента) - person Murugan Pandian; 25.03.2014
comment
фильтр является предопределенной функцией - person Murugan Pandian; 25.03.2014
comment
просто я передаю аргумент (ng-model=search) - person Murugan Pandian; 25.03.2014
comment
прохождение этого покажет мне строки, которые были добавлены только в эти ТОЧНЫЕ даты! Мне нужны все те, которые находятся в диапазоне дат, как объяснено в моем запросе. - person spyderReloaded; 25.03.2014
comment
Добавьте этот фильтр внутрь функции filterDateAdded() и передайте элемент - person Murugan Pandian; 25.03.2014
comment
добавлен dateFilter внутри функции filterDateAdded()... переданный элемент... все еще не работает.... все данные исчезают - person spyderReloaded; 25.03.2014
comment
я предполагаю, что есть какая-то проблема с форматом DATE... он не отображает item.dateAdded как объект Date... таким образом, пустые данные - person spyderReloaded; 25.03.2014
comment
где учитывается значение dt2? - person spyderReloaded; 25.03.2014
comment
дасссс!!! я правильно понял›... пришлось применить parseDate к item.dateAdded в функции возврата.. чтобы преобразовать строку в объект Date... foooo - person spyderReloaded; 25.03.2014