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: 
{
	"home" : {
			"room1" : {	
					  "status" 		: "true",
					  "switch_name" : "light 2",
					  "user_id" 	: "-Kvbk-XHqluR-hB8l2Hh"
			}
	}
}
*/
//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>
				<tr>
						<td>#ID</td>
						<td>#switchName</td>
						<td>#status</td>
				</tr>
		<thead>
		<tbody id="list"></tbody>
</table>

如何在没有从firebase重新加载页面的情况下更新数据

1 个答案: