Сделать любимые кнопки, отмеченные без перегрузки страницы 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>