AngularJS filter value from DatePicker
I am trying to filter mine ng-repeat
based on the date selected in the datepicker. My 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>
My controller looks like this:
$scope.BreadsToOrder = [
{
text: 'Apple Bread',
price: '$7.25',
days: ["Mon","Tue","Wed","Thu","Fri","Sat","Sunday"]
},
{
text: 'Challah',
price: '$5.95',
days: ["Thu","Fri"]
}
]
So, basically I would like the bread to be displayed only if the correct day of the week is selected. This works great if I put an actual date instead of theDate
, for example filter:{ days: 'Mon'}
, but I assume Angular cannot see the variable theDate
? Is this a question of scale? Should I put this jquery in a controller or what is the best way to do it as I mostly still think like JQuery and not Angular person?
source to share
It works with these HTML / Javascript and controller add-ons:
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>
Controller:
$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"]
}
]
So basically I had to add angular.element
and use $apply
to have it update the controller value. :)
source to share