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>

我有一个angular-ui datepicker，我想按日期过滤我的待办事项列表。但过滤器不起作用。

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日期返回，然后angularjs可以正确地过滤日期。

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

AngularJS按日期过滤

3 个答案: