AngularJS 从 DatePicker 过滤值

Question

我正在尝试根据在日期选择器中选择的日期过滤我的 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: '.25',
        days: ["Mon","Tue","Wed","Thu","Fri","Sat","Sunday"]        
    }, 
    { 
        text: 'Challah', 
        price: '.95', 
        days: ["Thu","Fri"]
    }
    ]

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

Answer 1

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

Answer 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: '.25',
        days: ["Mon","Tue","Wed","Thu","Fri","Sat","Sunday"]        
    }, 
    { 
        text: 'Challah', 
        price: '.95', 
        days: ["Thu","Fri"]
    }
    ]

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

AngularJS 从 DatePicker 过滤值

AngularJS Filter Value From DatePicker

jquery

datepicker

angularjs