Facebook Benachrichtigung Drop-Down von eckigen

Question

Ich versuche, Benachrichtigung Drop-Down wie facebook zu machen, wenn die Benachrichtigung ungelesen ist, gibt es einen Status, der ungelesen ist, ist wahr oder falsch, also möchte ich die Hintergrundfarbe dieser Benachrichtigung grau machen sonst ungelesen ist ungelesen = falsch, so dass der Hintergrund weiß ist. und es gibt eine Blase, wenn ich darauf klicke, mache die ungelesene Benachrichtigung als gelesen!

<li ng-if="vm.logged"> 
      <div class="dropdown"> 
      <button class="btn-noti" id="dropdownNoti" ng-click="vm.showDropdown($event)"> 
       <span class="fa fa-bell-o"></span> 
      </button> 
      <ul class="dropdown-menu" aria-labelledby="dropdownNoti"> 
       <div class="col-md-12 col-xs-12" style="border-bottom: #655771;border-bottom-style: double;"> 
       <h5 class="notification-title"><i class="fa fa-bell"></i> Notifications</h5> 
       <a class="mark-all" ng-click="vm.markAllRead()">Mark all as read</a> 
       </div> 
       <li ng-if="!vm.notifications.length"><a>You have no new notification yet.</a></li> 
       <li class="notification-type" ng-repeat="notification in vm.notifications" ng-if="notification.unread==true" ng-style="{'color':'red'}" style="border-bottom-style: ridge;"> 
       <a href="">{{notification.description}} 
        <h6><i class="fa fa-clock-o"></i> {{vm.timeOf(notification)}}</h6> 
       </a> 
       <a class="mark-as btn btn-default " ng-click="vm.markAsRead(notification.id)"></a> 
       </li> 
      </ul> 
      </div> 
     </li> 

Answer 1

Sie sollten ng-class verwenden den Ausdruck zu testen und eine bestimmte Klasse mit background-color propety

ng-class="$variableToEvaluate ? 'class-if-true' : 'class-if-false'">