Htykuut

In my Controller:

By clicking on an element, the information is given to tabNameStore.
The data is displayed in html by name

     $scope.openTab = function($event){



     //Checks for doubles

     if($scope.tabNameStore.length>0){

         for(var i=0; i<$scope.tabNameStore.length; i++){                

             if($scope.tabNameStore[i].id == $event.currentTarget.id){

                 console.log("Already open");

                return;

             }

         }

     }



     //Saves name, ID and number

     $scope.tabNameStore[count] = ({name: $event.currentTarget.innerHTML, 

 id: $event.currentTarget.id, num: count++});



     //Tries to get item by id

     var local = localStorage.getItem($event.currentTarget.id);



     //If not stored in local, it does so

     if (local == null){

      localStorage.setItem($event.currentTarget.innerHTML, 

$scope.tabNameStore[count-1].name);

      localStorage.setItem($event.currentTarget.id, 

$scope.tabNameStore[count-1].id);

      console.log("null");

    } else{

        console.log("not null");

        return;

    }



 }

Save the data from localStorage back in tabNameStore

     $window.onload = function() {       

     var archive = ;

     archive = allStorage();

     count = 0;



         for(var i=0; i<archive.length/2; i++){ 

             if(archive[i] != null){

                 $scope.tabNameStore[count] = ({name: archive[i], id: 

         archive[i+archive.length/2], num: count++});

             }

         } 

 }

Getting all data from localStorage

     function allStorage() {

     var keys = Object.keys(localStorage);          // Gibt alle Schlüssel zurück

     var archive = ;



    for (var i=0; i< keys.length; i++) {

        archive.push(keys[i]);

    }

     return archive;

 }

The HTML is:

   <article id="default">



    <div id="heading">

            <a href="###" class="tab" id="desktop" >Desktop</a>

            <a href="###" class="tab" id="" data-ng-repeat="y in 

    tabNameStore" data-ng-click="" >{{y.name}}</a>  

    </div>



    <div class="gridly toggle" id="Desktop">

        <div class="brick small" draggable="true" data-letters=" 

          {{x.name[0]}}" id="{{x.id}}" data-ng-repeat="x in storage | 

          orderBy: '-name'" data-ng-click="openTab($event)">

            {{x.name}}

        </div>

    </div>

    </article>

After reloading the page and getting the data from localStorage it's still not displayed, even if the array is filled. Just if I click again on one of my elements (openTab function), all elements stored in localStorage are displayed at once.

I solved it:

By adding a $scope.$apply around the part that reloads the array:

     ....

     $scope.$apply(function(){

         for(var i=0; i<archive.length/2; i++){ 

             if(archive[i] != null){

                 $scope.tabNameStore[count] = ({name: archive[i], id: 

                 archive[i+archive.length/2], num: count++});

             }

         }

     });

     ....

Like this the updated array is set up for angularjs after reloading.