There are two buttons, Today and Tomorrow, each with an ng-click function. By default, the button background color is white and text color is red.
When the Today button is clicked, the background color changes to blue and the text color changes to white.
The same design should apply to the Tomorrow button when clicked, while the Today button returns to its default colors. Here is the code:
<div class="row" style="height: 52px;">
<div class="col col-50" style="border-right: 1px #ccc solid; padding-top: 17px; text-align: center;" ng-click="GetDetails()" id="1">
<span class="assertive" style="margin: 0px;color: #B90143;">TODAY</span>
</div>
<div class="col col-50" style="padding-top: 17px;text-align: center;" ng-click="GetTomorrowDetails()">
<span class="assertive" style="margin: 0px;color: #B90143; width: 100%;">TOMORROW</span>
</div>
</div>
Controller for ng-click on both buttons :
$scope.GetDetails = function(){
$ionicLoading.hide();
$scope.orders.length = 0
MydeliveryFactory.save($scope.orderInfo, function(response){
var AllOrderValues = response.allorders;
for (var i = AllOrderValues.length - 1; i >= 0; i--) {
if(AllOrderValues[i].dateAdded == todaydate && AllOrderValues[i].monthAdded == todayMonth ) {
$scope.orders.push(AllOrderValues[i]);
$ionicLoading.hide();
console.log($scope.orders);
}
}
$window.localStorage.setItem("MyDeliverYOrders", JSON.stringify($scope.orders));
});
}
$scope.GetTomorrowDetails = function(){
$ionicLoading.show();
$scope.orders.length = 0
MydeliveryFactory.save($scope.orderInfo, function(response){
var Allvalues = response.allorders;
for (var i = Allvalues.length - 1; i >= 0; i--) {
if(Allvalues[i].dateAdded == tomorrowdate && Allvalues[i].monthAdded == tomorrowMonth) {
$scope.orders.push(Allvalues[i]);
$ionicLoading.hide();
console.log($scope.orders);
}
}
$window.localStorage.setItem("MyDeliverYOrders", JSON.stringify($scope.orders));
});
}