Question

我正在尝试使用angularfire实现手风琴。我可以检索顶级列表（＆＃34; A1＆＃34;，＆＃34; D1＆＃34;，＆＃34; R1＆＃34;）进行显示，但我无法弄清楚如何检索选中的每个手风琴选项卡的子项。例如，如果我选择＆＃34; D1＆＃34;，它应该打开并显示＆＃34; C1＆＃34;，＆＃34; H1＆＃34;。

这是我在firebase上的数据

 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>

我的代码

authenticate_with_http_basic

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数组的子记录

1 个答案: