角度jsを使用してリストを非表示/元に戻す

Question

角度jを使用して通知リストを作成しています。私は通知リストを隠すことができ、隠れた通知を取り消すことができる各通知リストの右側にドロップダウンがあります。 ng-attr-idを使用して各通知リストにIDを割り当てており、それを隠すためにクラスを追加しています。それはうまく動作しますが、ページを更新すると隠れた通知が表示されます。どうすればこれを防ぐことができますか？事前に おかげ

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> 

JS

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

CSS

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

Answer 1

ユーザーがページをリロードすると、すべての角度$スコープ値がリセットされます。

ブラウザのCookieとして保存するか、バックエンドサーバーデータベースに保存する必要があります。

ユーザーがページを読み込むと、この保存された設定が表示され、デフォルトで表示/非表示になります。例えばgetItem(key)

、localStorageはシンプルsetItem(key, value)ある -

まずクッキー/のlocalStorageを使用して：：

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

とクッキーがdocumented

他の選択肢です

Answer 2

は、2つのオプションがありますサーバー側のデータベースを使用することです、あなたはそれぞれの隠されたリストを読み込むことができます現在のテーブルに列を追加する：boolean HIDDEN、それを取得して、各通知の非表示/表示状態を変更する

Answer 3

この形式を試してください。

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とページが更新されたときにそれをロードします。