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

Question

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

我有一个使用 ng-repeat 创建的事件列表。每个事件都有一个按钮，允许我为该事件设置提醒。我想在列表加载时更改此按钮上的 classes（如果已经设置了提醒 - 这有效）并且当您单击按钮时 set/unset 提醒（这无效） ).

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

如何为每个按钮设置一个变量，该变量既可以在加载时使用，也可以在按下按钮时使用以供 ng-class 使用？

注意 - 通知设置工作正常，它只是按钮 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 更改 class

Changing a class with ng-class within a ng-repeat

javascript

angularjs

ionic-framework

ionic