如果已经单击了按钮，如何跟踪？

Question

我正在使用 Ionic 和 Firebase 编写应用程序，我的用户可以选择将某些内容添加到他们的“收藏夹”中。

现在，我找到了一种方法，让用户单击按钮并在单击后更改文本并将数据保存在数据库中，但如果用户移动到另一个页面并返回，则按钮返回到“添加到收藏夹”。

如何在按钮上显示有关用户之前对其进行的操作的文本？

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>

控制器：

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

我相信你应该这样做：

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>