制作收藏夹按钮显示标记不带重新加载页面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>