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

Question

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

我有一个用 ng-repeat 创建的事件列表。每个事件都有一个按钮，允许我为该事件设置提醒。我想在列表加载时更改此按钮上的类(如果已经设置了提醒 - 这是有效的)以及当您单击按钮以设置/取消设置提醒时(这不起作用)。

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

我如何为每个按钮设置一个变量，它既可以在加载时使用，也可以在按下按钮时使用，以供 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 :

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

.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”属性。