Question

我想显示一条消息“无可用通知”。如果页面上没有包含任何应用程序，我希望显示此内容。因此，如果页面是黑色的，则应显示该消息。我目前在HTML中设置了消息，但它没有正确显示。

控制器

$scope.dismissNotifications = function(app, ev) {
  var confirm = $mdDialog.confirm()
    .title('Confirm Dismiss All')
    .content('Are you sure you want to dismiss notifications?')
    .ariaLabel('Confirm Dismiss All')
    .ok('Confirm')
    .cancel('Cancel')
    .targetEvent(ev);

  $mdDialog.show(confirm).then(function() {
    var notifications = app.notifications;
    for (var id in notifications) {
      Service.dismissNotification(notifications[id].id).then(function(notificationId) {
        return function (response) {
          delete app.notifications[notificationId];
        }
      });
    }
  }, function() {
    return false;
  });
};

$scope.init = function () {
  Service.getUserAppsByEmail(SecService.secState.username).then(function (response) {
    var apps = response.applications;
    $scope.appList['alerts'] = {
      name: 'Alerts',
      notifications: {}
    } ;
    for(var i = 0; i < apps.length; i++) {
      $scope.appList[apps[i].appId] = {
        name: apps[i].name,
        icon: apps[i].icon,
        notifications: {}
      }
    }

HTML

<md-content flex="100">
<div class="m2" style="color: #FFFFFF; padding: 24px 36px;" ng-if="!(appList | NotificationsExistFilter)">No Notifications Available</div>
  <div ng-repeat="app in appList" ng-show="(app.notifications | AssociativeArrayFilter) > 0">
      <div layout="row" layout-align="start center" style="background-color: #3F454b; padding: 8px 16px;">
        <img ng-src="{{app.icon}}" style="width: 36px;" ng-show="app.icon">
        <md-icon style="width: 36px; height: 36px; color: #FFFFFF;" md-svg-icon="images/icons/error.svg" ng-hide="app.icon"></md-icon>

        <p class="m2" style="color: #FFFFFF; margin-left: 16px;">{{app.name}}</p>

        <div flex></div>

        <md-icon class="rotate-clockwise-45 no-outline" style="color: #FFFFFF; cursor: pointer;" md-svg-icon="images/icons/add_circle.svg" ng-click="dismissNotifications(app, $event)"></md-icon>
      </div>

      <div class="nots" ng-repeat="notification in app.notifications | orderObjectBy: 'unixEpoch' : true" layout="row" layout-align="start center" style="padding: 8px 16px; border-bottom: 1px solid rgba(255, 255, 255, .2);">

        <p flex class="m2" style="color: #FFFFFF; margin-left: 16px;">{{notification.message}} - <span class="m3"; style="color: #FFFFFF"; style="opacity: .3;"; am-time-ago="notification.whenCreated"></span></p>

        <md-icon style="color: #FFFFFF; cursor: pointer;" class="no-outline" md-svg-icon="images/icons/close.svg" ng-click="dismissNotification(notification)"></md-icon>
      </div>
    </div>
</md-content>

Answer 1

这将解决我想要完成的事情。在这种情况下，添加过滤器是最简单的解决方法。

在HTML中添加

<div class="m2" style="color: #FFFFFF; padding: 24px 36px;" ng-if="!(appList | NotificationsExistFilter)">No Notifications or Alerts Available</div>

在Controller中添加此过滤器

angular.module('notifications').filter('NotificationsExistFilter', function () {
return function (apps) {
if (!apps) {
  return false;
}

var retVal = false;
angular.forEach(apps, function (app, index) {
  if (!retVal) {
    angular.forEach(app.notifications, function (value, index) {
      if (!retVal) {
        retVal = true;
      }
    })
  }
});

return retVal;
};

Answer 2

您可以在脚本中使用ng-hide标记来推送div运行。以下是

的示例

http://jsfiddle.net/mrajcok/k4u5z/

在<p ng-hide="filteredBars.length">Nothing here!</p>中，布尔值隐藏true / false由列表中的项目数设置。在你的情况下，如果你在你的html（或其他div或任何你想要的东西）中添加这个<p>，并设置ng-hide="appList.length"，你将得到你想要的结果。

Answer 3

//在ng-repeat之外的html中

<div ng-show = "appListEmpty" class="m2" style="color: #FFFFFF; padding: 24px 36px;"  (INCLUDE A FILTER OR SORTS HERE)>No Notifications or Alerts Available<div>

//在你的控制器中（在你的init函数中放置if语句）

$scope.appListEmpty = false;
if(appList.length < 1){
$scope.appListEmpty = true;

}

如果没有可用的应用程序，则显示消息

3 个答案: