AngularJS 过滤来自 DatePicker 的值答案

【问题标题】：AngularJS Filter Value From DatePickerAngularJS 过滤来自 DatePicker 的值
【发布时间】：2015-06-09 10:34:53
【问题描述】：

我正在尝试根据在日期选择器中选择的日期过滤我的ng-repeat。我的 HTML/Javascript：

<script>
    $('#myFirstDate').datepicker({ 
        startDate: '+1d',
        todayHighlight: true
        }).on('changeDate', function(e){
            var theDate= $('#myFirstDate').datepicker('getDate').toString();
            var regex = /[A-Z]\w+/;
            theDate = regex.exec(theDate);  

    });
</script>
<div class="itemcontainer" ng-repeat="BreadToOrder in BreadsToOrder | filter:{ days: theDate}">
    <img ng-src="img/{{BreadToOrder.text|lowercase|nospace}}.jpg"></img><span class="itemname">{{BreadToOrder.text}}</span><span class="itemprice">{{BreadToOrder.price}}</span><input type="number" placeholder="#">
</div>

我的控制器如下所示：

$scope.BreadsToOrder = [ 
    { 
        text: 'Apple Bread', 
        price: '$7.25',
        days: ["Mon","Tue","Wed","Thu","Fri","Sat","Sunday"]        
    }, 
    { 
        text: 'Challah', 
        price: '$5.95', 
        days: ["Thu","Fri"]
    }
    ]

所以基本上我希望仅在选择一周中的正确日期时才显示面包。如果我输入实际日期而不是theDate（例如filter:{ days: 'Mon'}），这非常有用，但我想Angular 看不到theDate 变量？是范围问题吗？我应该把那个 jquery 放在控制器中还是最好的方法是什么，因为我仍然像一个 JQuery 而不是一个 Angular 人思考？

【问题讨论】：

标签： jquery angularjs datepicker

【解决方案1】：

将 $watch() 与 moment.js 一起使用，它提供了许多日期格式选项，通过结合这两者你可以实现它。

【讨论】：

【解决方案2】：

它适用于 HTML/Javascript 和控制器的这些添加：

HTML/Javascript：

<script>
   $('#myFirstDate').datepicker({ 
        startDate: '+1d',
        todayHighlight: true
        }).on('changeDate', function(e){
        var theDate= $('#myFirstDate').datepicker('getDate').toString();
        var regex = /[A-Z]\w+/;
        theDate = regex.exec(theDate)[0];
        console.log(theDate);
        var element = angular.element($('#myFirstDate'));
        var controller = element.controller();
        var scope = element.scope();
        scope.$apply(function(){
        scope.theDate = theDate;
     });
        });
</script>
<div class="itemcontainer" ng-repeat="BreadToOrder in BreadsToOrder | filter:{ days: theDate}">
    <img ng-src="img/{{BreadToOrder.text|lowercase|nospace}}.jpg"></img><span class="itemname">{{BreadToOrder.text}}</span><span class="itemprice">{{BreadToOrder.price}}</span><input type="number" placeholder="#">
</div>

控制器：

$scope.theDate = "";
$scope.BreadsToOrder = [ 
    { 
        text: 'Apple Bread', 
        price: '$7.25',
        days: ["Mon","Tue","Wed","Thu","Fri","Sat","Sunday"]        
    }, 
    { 
        text: 'Challah', 
        price: '$5.95', 
        days: ["Thu","Fri"]
    }
    ]

所以基本上我必须添加angular.element 并使用$apply 来获取它来更新控制器值。 :)

【讨论】：