Facebook通知按角度下拉

时间:2017-03-26 10:46:08

标签: javascript html angularjs model-view-controller

我正在尝试像facebook一样发出通知下拉,当通知未读时,有一个未读的状态为真或假,所以我想让这个通知的背景颜色为灰色,否则未读是未读=假背景是白色的。当我点击它时,有一个泡沫使未读通知成为读取!

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

1 个答案:

答案 0 :(得分:0)

您应该使用ng-class来测试表达式并添加一个具有background-color propety的特定类

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