如何在無需從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的不正確的功能不起作用，所以也幫助，這也是值得讚賞的，但這是一個能夠訪問我不知道該怎麼做的faved陣列的正確的孩子的問題。

我認爲需要發生的事情是，頁面使用正確的信息進行更新，當某些內容被收錄時，某種類型的監聽器會收到$，但我不確定如何實現它。

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>