使用角度js隱藏/撤消列表

我正在使用角度js創建通知列表。我在每個通知列表的右側有一個下拉列表，可以隱藏通知並撤消隱藏的通知。我正在使用ng-attr-id爲每個通知列表分配標識並向其添加一個類以隱藏它。它工作正常，但是當我刷新頁面隱藏通知顯示。我怎樣才能防止這個？在此先感謝使用角度js隱藏/撤消列表

HTML

<md-list-item class="md-2-line" ng-repeat="notification in notificationList" ng-attr-id="{{ 'notification-list-' + $index }}"> 
    <div class="md-list-item-text"> 
      <div class="notification-content"> 
       <div class="ng-flex-box"> 
       <label class="notification-header label" data-ng-bind="notification.content"></label> 
       </div> 
       <label class="notification-message" data-ng-bind="notification.applicationId"></label> 
       <label class="notification-category" data-ng-bind="notification.category"></label> 
       <div> 
       <span class="notification-date pull-right" data-ng-bind="notification.date"></span> 
       </div> 
      </div> 
      <md-menu> 
       <i class="icon icon-sm icon-tree_open" aria-hidden="true"></i> 
       <md-menu-content class="hide-notification-content"> 
       <md-menu-item> 
        <a href="#" ng-click="$ctrl.hideNotification($index)">Hide this notification</a> 
       </md-menu-item> 
       <md-menu-item> 
        <a href="#">Manage notification from this app</a> 
       </md-menu-item> 
       </md-menu-content> 
      </md-menu> 
    </div> 
    </md-list-item>

$ctrl.hideNotification = function (id) { 
       $ctrl.notificationListId= id; 
       angular.element('#notification-list-'+$ctrl.notificationListId).addClass('hide-notification-class');    
      }

CSS

.hide-notification-class{ 
     display: none; 
    }

來源

2016-09-20 Shareer

最初，當你加載頁面的通知應該隱藏？爲什麼不把類'hide-notification-class'添加到元素，然後點擊按鈕顯示它。 – cjmling

沒有。最初我需要顯示所有通知。用戶應該可以根據自己的喜好隱藏點擊@cjmling – Shareer

因此，當用戶點擊隱藏，然後用戶重新加載頁面，它應該默認隱藏？ – cjmling

每當用戶重新加載頁面時，所有角度$範圍值都會重置。

您必須將用戶首選項作爲瀏覽器cookie存儲或存儲在後端服務器數據庫中。

然後，當用戶加載頁面時，您將獲得此存儲的首選項，並根據默認值顯示/隱藏它。

來源

2016-09-20 06:04:13 cjmling

有兩種選擇：

首先使用cookie/localStorage的 - localStorage簡單setItem(key, value)，getItem(key)

例如：

localStorage.setItem(ID + "_ISHIDDEN", true);

和餅乾documented

另一種選擇是使用服務器端數據庫，你可以加載每個u的隱藏列表在您的當前表中添加一列：布爾型HIDDEN然後檢索並更改每個通知的隱藏/顯示狀態

來源

2016-09-20 06:12:30

試試這種格式。

JAVASCRIPT

$ scope.isCollapsed = TRUE;

HTML

<md-button ng-click="isCollapsed = !isCollapsed"> Show/hide </md-button> 

<collapsible-content ng-show='isCollapsed'> 
    Content 
</collapsible-content>

使用JavaScript localStorage的選項保存isCollapsed值，刷新頁面時加載它。

來源

2016-09-20 07:04:25

使用角度js隱藏/撤消列表

回答

相關問題