如何使用Angularfire动态访问Firebase数组的子记录

Question

我正在尝试使用angularfire实现手风琴。我能够检索顶层列表（“A1”，“D1”，“R1”）进行显示，但我无法弄清楚如何检索选定的每个手风琴选项卡的孩子。例如，如果我选择“D1”，它应该打开并显示“C1”，“H1”。

这里是我的火力

{ 
    "A1" : { 
    "B1" : 50 
    }, 
    "D1" : { 
    "C1 " : 98, 
    "H1" : 12 
    }, 
    "R1" : { 
    "RR1" : 67, 
    "RD1" : 54 
    } 
} 

我的代码数据

var app=angular.module("sampleApp",["firebase"]); 
     app.controller("MyCtrl", ["$scope", "$firebaseArray", "$firebaseObject", 
       function($scope, $firebaseArray,$firebaseObject) { 

        var ref = firebase.database().ref("Products/"); 

        var list = $firebaseArray(ref); 
        $scope.list = list; 
        $scope.activeTabs = []; 
        // check if the tab is active 
        $scope.isOpenTab = function (tab) { 
         // check if this tab is already in the activeTabs array 

         if ($scope.activeTabs.indexOf(tab) > -1) { 
          // if so, return true 
           return true; 
         } else { 
         // if not, return false 
           return false; 
         } 
        } 
        // function to 'open' a tab 
        $scope.openTab = function (tab) { 
          // check if tab is already open 
          if ($scope.isOpenTab(tab)) { 
          //if it is, remove it from the activeTabs array 
           $scope.activeTabs.splice($scope.activeTabs.indexOf(tab), 1); 
          } else { 
           // if it's not, add it! 
            $scope.activeTabs.push(tab); 
          } 
        }     
       } 
       ]); 

HTML Code 

    <div class="container accordion__container" ng-controller="MyCtrl"> 

     <div class="accordion__tab" ng-repeat="products in list"> 
      <div class="accordion__tab-title" ng-click="openTab(products.$id)">{{products.$id}} </div> 

      <div class="accordion__tab-content" ng-show="isOpenTab(products.$id)"> 

       <div class="accordion__tab-contentdet" ng-repeat="productDet in <sub Product details>">  


       </div> 
      </div> 


     </div> 
     </div> 

Answer 1

我做在你的代码的一些变化。

在HTML我使用了导航选项卡。

<ul class="nav nav-tabs"> 
    <li ng-repeat="products in list"> 
    <a data-toggle="tab" href="#{{products.id}}">{{products.id}}</a> 
    </li> 
</ul> 

<div class="tab-content"> 
    <div id="{{products.id}}" class="tab-pane fade" ng-repeat="products in list"> 
     <h3>{{products.id}}</h3> 
     <p>Content : {{products.data}}.</p> 
    </div> 
</div> 

$（）加载控制器

app.controller("MyCtrl", ["$scope", "$firebaseObject", 
    function($scope, $firebaseObject) { 

    var ref = firebase.database().ref("Products"); 
    var list = $firebaseObject(ref); 

    list.$loaded().then(function() { 
     $scope.list = []; 
     angular.forEach(list, function(value,key){ 
      $scope.list.push({ id: key, data: value}) 
     }) 
    }); 
    }    
]); 

另一种方法 而不是使用列表中，您可以使用下面的代码：

ref.once('value', function(snapshot) { 
    $scope.list = []; 
    angular.forEach(snapshot.val(), function(value,key){ 
    $scope.list.push({ id: key, data: value}) 
    }) 
}) 

我刚刚创建一个为你而活的人。请检查

https://plnkr.co/edit/5dOr7xAWIFlmdykAC1yh

，如果您有任何疑问，请让我知道。