Question

我正在编写一个小型的Ionic / Angular应用程序并遇到了一个问题。

我有一个用ng-repeat创建的事件列表。每个活动都有一个按钮，可以让我为该活动设置提醒。我想在列表加载时更改此按钮上的类（如果已设置提醒 - 这是有效的），并且当您单击按钮设置/取消设置提醒时（这不起作用）。

我在这里使用了2个控制器 - 获取列表数据的议程控制器和处理单击按钮时设置提醒的通知控制器。

如何设置每个按钮的变量，既可以在onload上使用，也可以在按下按钮使用ng-class时使用？

注意 - 通知设置工作正常，它只是按钮类，我可以解决点击时如何更改。

到目前为止，这是代码。

我的列表/按钮：

<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>

我的议程控制员：

.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);
    });
})

通知控制器：

.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);
        }
    );
}
})

Answer 1

在$scope.add方法的某处，您需要设置item.hasNotificationSet=true;。

注意ng-class="agendaItem.hasNotificationSet ?。

另请注意，我建议只将agendaItem传递到add方法，以便您可以直接访问此对象，以便更改其“hasNotificationSet”属性。

在ng-repeat中使用ng-class更改类

1 个答案: