Фильтр AngularJS по дате

Question

<div class="well calendar" ng-model="dt"> 
     <datepicker min="minDate" show-weeks="showWeeks"></datepicker> 
    </div> 
    <div class="well"> 
     <ul class="unstyled"> 
      <li ng-repeat="todo in todos | filter: dt"> 
       <input type="checkbox" ng-model="todo.done"> 
       <span class="done-{{todo.done}}">{{todo.text}}</span> 
       <span class="done-{{todo.done}}">{{todo.date | date:'fullDate'}}</span> 
      </li> 
     </ul> 
    </div> 

У меня есть угловой ui datepicker, и я хочу отфильтровать список todos по дате. Но фильтр не работает.

Answer 1

Я думаю, что есть ошибка, вам необходимо переместить ng-model с div на datepicker, чтобы убедиться, что модель обновлена.

В вашем случае вы можете сделать фильтрацию внутри контроллера с помощью $ watch. Как это:

function testController($scope,$filter){ 
    $scope.todos = [ 
     {done:true,text:"test 1",date:new Date(2013,11,24)}, 
     {done:false,text:"todo 2",date:new Date(2013,11,25)}, 
     {done:false,text:"todo 3",date:new Date(2013,11,26)} 
    ]; 

    $scope.filterTodos = []; 

    $scope.$watch("dt",function(newValue,oldValue,scope){ 
     if (newValue){ 
      scope.filterTodos = $filter('filter')(scope.todos, function(todo){ 
       console.log(todo.date.getDate()); 
       console.log(newValue); 
       return todo.date.getDate() == newValue; 
      }); 
     } 
     else{ 
      scope.filterTodos = scope.todos; //no filter 
     } 
    }); 
} 

DEMO

В этой демонстрации, я позволяю пользователям вводить произвольный текст и фильтр date.getDate(), вы можете изменить логику фильтрации в любом случае вы хотите.

Answer 2

Я думаю, что вам не нужны часы, так как просмотр перерисовывается каждый раз, когда изменяется фильтр. Так что просто нужно добавить соответствующий фильтр.

И да, вы должны переместить ng-model = "dt" в элемент ввода, datepicker в вашем случае, чтобы каждый раз, когда вы вводите какую-либо дату или изменяете ее, она обновляет модель. И вы используете модель в качестве фильтра, поэтому, когда изменения модели приводят к изменению фильтра, представление перерисовывает фильтрацию результатов.

Answer 3

Я испытал это чаще всего; много читайте о создании настраиваемого фильтра приложений. Но я думаю, что самый быстрый способ, особенно если у вас есть доступ к источнику дат, и если он поступает из MySQL, просто верните дату из базы данных в качестве даты ISO, а угловые могут затем правильно фильтровать дату.

date("c", strtotime($mysqlDateValueFromDb))