如何在ng-repeat中使用localStorage值過濾器

Question

當用戶單擊投票選擇時，我已經設置了一個值。 它的工作。

.then(function(response) { 
  localStorage.setItem('isClicked', 'Yes');
  var i = +localStorage.key("nid");
  var nidId = 'nid' + localStorage.length;
  localStorage.setItem(nidId, vm.nid);
  vm.clickedBefore = true;
})

這是我的HTML范圍：

<div class="card myfunc" ng-repeat="myfunc in myfuncPage.myfuncs" id="{{myfunc.nid}}"  >

  <div class="item item-text-wrap">
    <h2 class="item-icon-left"><i class="icon ion-ios-analytics"></i>
      {{myfunc.title}}</h2>
    </div>
    <div class="item item-text-wrap" ng-show="localstorage">
      <img ng-src="{{myfunc.field_image.und[0].imgPath}}"/>
      <p class="custom-class" ng-bind-html='myfunc.body.und[0].value'>
      </p>
      <ul ng-repeat="vote in myfunc.advmyfunc_choice">
        <li ng-repeat="voteselect in vote">
          <div class="row">
            <button class="col button button-outline button-dark" ng-click="myfuncPage.sendNid(myfunc);myfuncPage.sendVote(voteselect);showVoted = ! showVoted" >{{voteselect.choice}}</button>
            <div class="voted-screen" ng-show="showVoted">
              <h3>Thanks.</h3>
            </div>      
          </div>
        </li>
      </ul>

    </div>

  </div>

基本上，我需要記住通過localStorage的div，並在頁面刷新時隱藏選擇div。

ng-show="showVoted"在點擊時有效，但我需要刷新。

最好的方法是什么？ 謝謝。

Answer 1

我不確定您使用的是哪個本地存儲模塊，所以我不能具體說明，但是我會編寫工廠來處理所需值的檢索和存儲。

(function () {
  var voteFactory = function (localStorage) {
        return {
            getVote: function (key) {
               var isVoted = false;  

               // get local storage item, set voted etc
               var voted = localStorage.getItem(key);
               if(voted) {
                  isVoted = voted;
               }
               return isVoted;

            },
            setVote: function(key, value) {
               localStorage.setItem(key,value);
            }          
         };
       };
      app.factory('voteFactory', ['localStorage', voteFactory]);
 })();    

然后，在作用域控制器/指令中，用於顯示或隱藏的對象將具有以下功能：

$scope.showVoted = function(key) {
  return voteFactory.getVote(key);
}

然后ng-show =“ showVoted（theidentifieryouwantouse）”

還值得一提的是，我將使用ng-if代替ng-show。 為了提高效率，您可以將選票存儲為數組而不是單個值，並進行檢查以查看是否已檢索所有值，否則請從本地存儲獲取。 然后，您的函數將詢問檢索到的數組，而不是重復調用本地存儲。 我還建議也許在工廠中使用諾言，因為從本地存儲中檢索可能會延遲，從而導致用戶界面怪異。

希望這是您所尋找的路線。 如果需要，我可以詳細說明。