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

Question

我正在尝试使用 angularfire 实现手风琴。我能够检索顶级列表（"A1"、"D1"、"R1"）以供显示，但我无法弄清楚如何为 [=] 的每个手风琴选项卡检索子项24=]编辑。例如，如果我 select "D1"，它应该打开并显示 "C1"、"H1"。

这是我在 firebase 上的数据

{
  "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})
       })
    });
  }               
]);

另一种方法 您可以使用以下代码代替 list.$loaded()：

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

我刚刚为你创建了一个 plunker。请查收

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

如果您有任何疑问，请告诉我。

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

How to access child records of a firebase array dynamically using Angularfire

angularjs

firebase

angularfire

firebase-realtime-database