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

Question

I am trying to implement a accordion using angularfire . I am able to retrieve the top level list ("A1","D1","R1")for display but I am unable to figure out how to retrieve the child for each accordion tab that is selected. For Eg if I select "D1", it should open up and display "C1", "H1".

Here is my data on firebase

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

My code

 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>

Libu Mathew · Accepted Answer · 2016-09-25 07:34:40Z

1

I made some changes in your code.

In HTML i used nav tabs.

<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>

Controller

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

Another Method Instead of using list.$loaded() you can use the below code:

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

I just created a plunker for you. Please check it

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

if you have any doubt please let me know.

edited Sep 25, 2016 at 7:34

answered Sep 24, 2016 at 23:16

Libu Mathew

2,99626 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kpbeng Over a year ago

Thanks..I will try this out.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related