Как обновить данные без перезагрузки страницы из firebase

Question

Я пытаюсь реализовать простую систему избранного. На страницах загрузки страницы перечислены на главной странице, и любые ранее размещенные сообщения, называемые nubs, будут отображаться с тегом FAVED под ними.

<div class="list-group" ng-repeat="nub in nubs"> 
    <a href="#" class="list-group-item active"> 
    <h4 class="list-group-item-heading">{{nub.title}}</h4> 
    <p class="list-group-item-text">{{nub.description}}</p> 
    <p class="list-group-item-text">{{nub.synopsis}}</p> 
    <li ng-repeat="url in nub.attachmentsUrls"> 
     <p class="list-group-item-image"> 
     <img ng-src={{url}} /> 
     </p> 
    </li> 
    </a> 
    <button ng-click="toggleFav(nub)">favorite</button> 
    <p ng-show="getFaved(nub.$id)">FAVED</p> 
</div> 

Это работает, но когда я добавляю что-то в свои фавориты, страница не обновляется, чтобы отразить новоприбывший пост. Я хочу, чтобы моя страница активно реагировала на функцию toggleFav.

Вот мой контроллер

var ref = new Firebase("https://xxxxx.firebaseio.com"); 
var auth = ref.getAuth(); 

var nubRef = new Firebase("https://xxxxx.firebaseio.com/Nubs"); 
var nubs = $firebaseArray(nubRef); 
$scope.nubs = nubs; 

var userRef = new Firebase("https://xxxxx.firebaseio.com/users"); 
var users = $firebaseArray(userRef); 
$scope.users = users; 

// Array of booleans for favorites 
$scope.favedArray = []; 

// Array of user ids for 
$scope.userIdArray = []; 

var userFavs = $firebaseArray(userRef.child(auth.uid).child("favorites")); 
$scope.userFavs = userFavs; 

userFavs.$loaded() 
.then 
(
    function() 
    { 
    nubs.$loaded() 
    .then 
    (
     function() 
     { 
     $scope.tempFaved = []; 
     $scope.tempId = []; 
     console.log(userFavs); 

     angular.forEach 
     (
      nubs, 
      function(nub) 
      { 
      $scope.tempFaved.push(false); 
      $scope.tempId.push(nub.$id); 
      console.log($scope.tempId); 

      angular.forEach 
      (
       userFavs, 
       function(favs) 
       { 
       console.log($scope.tempFaved); 
       if(favs.nub == nub.$id) 
       { 
        $scope.tempFaved.pop(); 
        $scope.tempFaved.push(true); 
        console.log($scope.tempFaved); 
       } 
       } 
      ); 
      } 
     ); 

     while($scope.tempFaved.length > 0) 
     { 
      $scope.favedArray.push($scope.tempFaved.pop()); 
      $scope.userIdArray.push($scope.tempId.pop()); 
     } 
      $scope.getFaved = function(nubId) 
       { 
       console.log($scope.favedArray[$scope.userIdArray.indexOf(nubId)]); 
       $scope.faved = $scope.favedArray[$scope.userIdArray.indexOf(nubId)]; 
       return $scope.faved; 
       } 

      $scope.toggleFav = function(nub) 
       { 
       var nubFavRef = nubRef.child(nub.$id).child("favorites"); 
       var nubFavs = $firebaseArray(nubFavRef); 
       var faved = $scope.getFaved(nub.$id) 
       console.log(faved); 
       if (faved == false) 
        { 
        nubFavs.$add 
        (
         { 
         user: auth.uid 
         } 
        ); 
        userFavs.$add 
        (
         { 
         nub: nub.$id 
         } 
        ) 
        console.log("favorited"); 
        } 
       else 
       { 
        nubFavs.$remove(auth.uid); 
        userFavs.$remove(nub.$id); 
        console.log("unfavorited"); 
       } 
       }; 
      } 
     ) 
     } 
    ); 

По существу это цикл через выпуклости или сообщения, отображаемые на странице и их проверки в отношении утолщений пользователя Избраных для отображения метки FAVED и переключать функции фаворита кнопка. Если у пользователя нет нулевого фаворита, кнопка добавит нуб в свой список избранных, а также добавит их в список пользователей, у которых есть нуль, и если у пользователя есть сообщение, оно будет удалено.

Непригодная функциональность toggleFav не работает, так что помощь с этим также будет оценена, но это вопрос доступа к правильному дочернему элементу массивов, которые я не уверен, как это сделать.

То, что, как мне кажется, должно произойти, чтобы страница обновлялась с правильной информацией, когда что-то предпочтительнее, является своего рода $ on слушателем, но я не уверен, как ее реализовать.

Answer 1

/* How store data in fire base: 
 
{ 
 
\t "home" : { 
 
\t \t \t "room1" : { \t 
 
\t \t \t \t \t "status" \t \t : "true", 
 
\t \t \t \t \t "switch_name" : "light 2", 
 
\t \t \t \t \t "user_id" \t : "-Kvbk-XHqluR-hB8l2Hh" 
 
\t \t \t } 
 
\t } 
 
} 
 
*/ 
 
//select element in which you want real time data. 
 
const preObject = document.getElementById('tbl_switch_list'); 
 

 
//select your root table name 
 
const dbRefObject = firebase.database().ref().child('home'); 
 

 
//Change Value in Firebase and view in your console. 
 
dbRefObject.on('value',snap => console.log('Response : ',snap.val());

<h3>Switch List</h3> 
 
<table id="tbl_switch_list" border="1"> 
 
    <thead> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t \t <td>#ID</td> 
 
\t \t \t \t \t \t <td>#switchName</td> 
 
\t \t \t \t \t \t <td>#status</td> 
 
\t \t \t \t </tr> 
 
\t \t <thead> 
 
\t \t <tbody id="list"></tbody> 
 
</table>