製作收藏夾按鈕顯示標記不帶重新加載頁面Ionic

Question

我寫了一個顯示帖子列表的離子頁面，每個帖子都有一個用於標記它的收藏按鈕（星形圖標）。當我點擊收藏按鈕時，數據將被插入到數據庫中，但圖標不會立即標記。重新加載頁面後，它被標記。所以點擊它時如何使圖標立即標記。

這裏是我的網頁代碼，它使用$scope.post_infos顯示數據，如果變量「標記」的存在，最喜歡的按鈕，將顯示星形圖標，否則概述星形圖標：

<ion-list> //ng-controller is recuitmentCtrl 
<div ng-repeat="post_info in post_infos" > 
    <ion-item> 
    <div class=" item-button-right"> 
      <a ng-click="showContent(post_info.id)"> 
      <div class="post"> 
        <div class= "title">{{post_info.title}}</div> 
        <div class= "description">{{post_info.description}}</div> 
      </div> 
      </a> 
      <button class="button button-icon i" ng-click="isFavorite(post_info.id)"> 
      <i ng-class="{'icon ion-android-star-outline': !post_info.marked, 
         'icon ion-android-star': post_info.marked}"></i> 
      </button> 
    </div> 
    </ion-item> 
</div> 
</ion-list> 

在我controller.js

.controller('recuitmentCtrl', ['$scope', '$state', function ($scope, $state,) { 

    var ref = firebase.database().ref('posts'); 
    var titles, descriptions; 
    $scope.post_infos = []; 

    ref.on('value' ,function(snapshot){ 
     var userID = firebase.auth().currentUser.uid; 
     $scope.post_infos = []; 

     snapshot.forEach(function(childSnapshot){ 

      var marked = firebase.database().ref('users/'+ userID + '/favorites/' + childSnapshot.key); 
      marked.on('value', function(snapshot_user){ 
      var obj = { 
       "id":   childSnapshot.key, 
       "title":  childSnapshot.val().title, 
       "description": childSnapshot.val().description, 
       "marked":  snapshot_user.child("marked").val() 
      }; 
      $scope.post_infos.push(obj); 
     }) 
    }); 
}); 

    $scope.showContent = function(param){ 
     $state.go('postdetail',{postID: param}); 
    }; 

    $scope.isFavorite = function(postID){ 
     var userID = firebase.auth().currentUser.uid; 
     var userRef = firebase.database().ref('users/'+ userID + '/favorites/' + postID); 
     userRef.set({ 
      marked: true 
     }).then(function(result){ 
    }); 
} 

}]）

這裏是我的數據庫：

Answer 1

您需要更新變量post_info時，它的標記爲收藏，這裏有兩種方法可以做到這一點：

控制器

$scope.isFavorite = function(post){ 
    var userID = firebase.auth().currentUser.uid; 
    var userRef = firebase.database().ref('users/'+ userID + '/favorites/' + post.id); 
    //post.marked = true; //instant feedback 
    userRef.set({ 
     marked: true 
    }).then(function(result){ 
     //post.marked = true; //will mark as favorite as soon as the server accepts the request 
    }); 

模板

<button class="button button-icon i" ng-click="isFavorite(post_info)"> 
     <i ng-class="{'icon ion-android-star-outline': !post_info.marked, 
        'icon ion-android-star': post_info.marked}"></i> 
</button>