I'm writing a small Ionic/Angular app and have run into an issue.
I have a list of events created with ng-repeat. Each event has a button which allows me to set a reminder for that event. I want to change the classes on this button when the lists loads (if a reminder if already set - this is working) and ALSO when you click the button to set/unset a reminder (this is not working).
I have 2 controllers in use here - the agenda controller that gets the data for the list and the notification controller that deals with setting the reminder when the button is clicked.
How can I set a variable per button that can be used both onload and when the button is pressed for ng-class to use?
Note - the notifications setting works fine, it's just the button class I can't work out how to change when it's clicked.
Heres the code so far.
My list / buttons:
<ion-list>
<ion-item ng-repeat="(id,agendaItem) in agendaItems"
type="item-text-wrap"
href="#/tab/agendaItem/{{agendaItem.$id}}"
class="item item-avatar item-with-grid">
<img ng-src="{{agendaItem.image}}">
<p>{{agendaItem.startTime}}</p>
<h2>{{agendaItem.title}}</h2>
<p>{{agendaItem.speaker}}</p>
<ion-option-button
ng-class="agendaItem.hasNotificationSet
? 'button-balanced icon ion-ios7-bell'
: 'button-positive icon ion-ios7-bell-outline'"
ng-controller="NotificationCtrl"
ng-click="add(agendaItem.notificationId)"></ion-option-button>
</ion-item>
</ion-list>
My agenda controller:
.controller('AgendaCtrl', function($scope, AgendaFactory, $ionicSideMenuDelegate, $rootScope, $ionicPopup, $timeout, $cordovaLocalNotification, NotificationFactory) {
var agendaItems = AgendaFactory.getAgenda();
// Loop through agenda itens and check which have notifications set
agendaItems.$loaded().then(function(array) {
angular.forEach(array, function(value, key) {
console.log(value.notificationId);
if (NotificationFactory.isNotificationScheduled(value.notificationId)) {
console.log("scheduled");
value.hasNotificationSet = true;
} else {
console.log("NOT scheduled");
value.hasNotificationSet = false;
}
});
$scope.agendaItems = agendaItems;
console.log($scope.agendaItems);
});
})
And the notifications controller:
.controller('NotificationCtrl', function($scope, $cordovaLocalNotification, NotificationFactory, $ionicListDelegate) {
$scope.add = function(notificationId, startTime) {
console.log("NOTIFY: add("+notificationId+")");
// Check if notification already set for this ID
NotificationFactory.isNotificationScheduled(notificationId)
.then(function(isScheduled) {
console.log("returned data = " + isScheduled);
// If notification is already scheduled, cancel it
if(isScheduled) {
// does this need a then and return on the factory????
NotificationFactory.cancelNotification(notificationId).then(function(data) {
console.log(data);
console.log("cancelled from add() as preexisting")''
$ionicListDelegate.closeOptionButtons();
});
// Notification is not already scheduled
} else {
// Add notification
console.log("notification is not set, proceeding with creating a new one");
var alarmTime = new Date();
alarmTime.setMinutes(alarmTime.getMinutes() + 1); // needs to be the event time from firebase minus 5 mins
NotificationFactory.addNotification(notificationId, alarmTime, "message", "title").then(function(added) {
if(added) {
console.log("The notification has been saved");
$ionicListDelegate.closeOptionButtons();
} else {
// always end up here?
console.log("ERROR saving notification");
}
});
}
}, function(error) {
console.log('error', error);
}
);
}
})
Somewhere in $scope.add
method, you need to set item.hasNotificationSet=true;
.
Notice ng-class="agendaItem.hasNotificationSet ?
.
Also note, I recommend passing just agendaItem
into the add
method so that you have direct access to this object in order to change its "hasNotificationSet" property.