如何跟踪是否已单击按钮？

Question

I am writing an app with Ionic and Firebase and my users have the choice to add something to their "Favorites".

Now, I found a way to have the user clicking the button and changing the text once clicked and saving the data in the database, but if the user moves to another page and come back, the button comes back to "Add to favorites".

How to display the text on the button regarding what the user did with it before ?

The DOM :

<div class="list card" id="topLetters-card21" ng-repeat="letter in letters">
      <ion-item class="item-avatar item-icon-right" id="userId{{$index}}" alt="{{letter.uid}}" ui-sref="menu.user">
          <img src="{{letter.userpic}}" alt="">
          <h2>{{letter.username}} </h2>
        <p>{{letter.location}}</p>
        <i class="icon ion-android-arrow-dropright"></i>
      </ion-item>

      <h2  style="color:#000000;" class="padding-left" id="letterId{{$index}}" alt="{{letter.letter}}">{{letter.title}}</h2>
      <div style="{{letter.font}}background: url(img/{{letter.background}}.jpg) no-repeat center;background-size:cover;">
        <h5 style="{{letter.font}}text-align:right;"id="topLetters-heading15" style="color:#000000;" class="padding">{{letter.date}}</h5>
      <h5 style="{{letter.font}}"id="topLetters-heading4" style="color:#000000;" class="padding">{{letter.opening}} {{letter.to}}, </h5>
      <div id="topLetters-markdown3" style="text-align:justify;" class="show-list-numbers-and-dots padding">
        <p style="color:#000000;">{{letter.message}}</p>
      </div>
      <h5 style="{{letter.font}}"id="topLetters-heading5" style="color:#000000;text-align:right;" class="padding">{{letter.conclusion}}, {{letter.username}}.</h5>
    </div>
      <button id="addletter{{$index}}" ng-click="addToFavorites($index)" class="button button-dark button-small button-block icon ion-ios-heart-outline" alt={{letter.letter}}> Add to Favorites</button>
      <ion-item class="item-icon-left item-icon-right" id="topLetters-list-item29">
        <i class="icon ion-ios-heart-outline"></i>{{letter.likes}}
        <i class="icon ion-ios-flag"></i>
      </ion-item>
      <div class="spacer" style="width: 300px; height: 29px;"></div>
    </div>

The Controller :

var ref = firebase.database().ref('/letters');
//retrieve the items in the cart of the user
  ref.orderByChild("likes").on("value", function(snapshot1) {

    $timeout(function(){
    $scope.letters = snapshot1.val();
    })
  })

  $scope.addToFavorites = function(ind){
    var letterId = document.getElementById('letterId'+ind).getAttribute('alt');
    var userId2 = document.getElementById('userId'+ind).getAttribute('alt');
    var userId = firebase.auth().currentUser.uid;
    //Add the letterUid and ID to our favorites to retrieve it later
    //Add our uid to the letter to count the number of Favorites


    if(document.getElementById('addletter'+ind).textContent == " Add to Favorites"){
        $timeout(function(){
      firebase.database().ref('accounts/' + userId + '/favorites/' + letterId).update({
          letterId: letterId,
          userId: userId2,
      });
      firebase.database().ref('letters/' + letterId + '/favorites/' + userId).update({
          userId: userId,
      });
      document.getElementById('addletter'+ind).textContent = " Remove from Favorites";
    })
    } else if (document.getElementById('addletter'+ind).textContent == " Remove from Favorites")
    $timeout(function(){
      document.getElementById('addletter'+ind).textContent = " Add to Favorites";
      firebase.database().ref('/accounts/' + userId + "/favorites/" + letterId).remove();
      firebase.database().ref('/letters/' + letterId + "/favorites/" + userId).remove();
})

  }

Answer 1

I believe you should do something like this:

JS

$scope.accountsFavorites = [];
$scope.lettersFavorites = [];

$scope.getFavorites = function(){

  $scope.accountsFavorites = firebase.database().ref('/accounts/' + userId + "/favorites/")
  $scope.lettersFavorites = firebase.database().ref('/letters/' + letterId + "/favorites/")


  $scope.syncFavorites();

}

$scope.syncFavorites() {

   $scope.letters.forEach(function(letter){

        $scope.lettersFavorites.forEach(function(favoriteLetter){

             if(letter.id == favoriteLetter.letter_id) { // or something

                   letter.isFavorite = true;

             }

        })


   })

}

$scope.getFavorites();

HTML

<button 
   id="addletter{{$index}}" 
   ng-click="addToFavorites($index)" 
   class="button button-dark button-small button-block icon ion-ios-heart-outline" 
   alt={{letter.letter}}>

        <span data-ng-if="letter.isFavorite">Remove from favorites</span>
        <span data-ng-if="!letter.isFavorite">Add to favorites</span>


 </button>