Question

我正在尝试根据在datepicker中选择的日期过滤我的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人？

Answer 1

将{watch（）与moment.js一起使用，通过将这两者组合起来，可以为日期提供大量格式化选项。

Answer 2

它适用于HTML / Javascript和Controller的这些新增功能：

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来更新控制器值。：）

来自DatePicker的AngularJS过滤器值

2 个答案: