CODEWITHSUNDEEP
htmlangularjsfirebasefirebase-realtime-databaseangularfire
Abdullah Sultan
Abdullah Sultan

Reputation: 191

Populate dropdown 2 using option in dropdown 1 - firebase

I am trying to show the equipment's for the system selected in my first dropdown. Though I am not sure on how to exactly accomplish that. I have thought of using ng-model but i don't know how to accomplish my task using that! I have included the json format at the end of this post. Thank you.

<div class="form-group col-xs-6" id="sysList">
  <label for="selectsys">Select system list:</label>
  <select class="form-control" id="selectsys">
    <option value="" disabled="" selected="" style="display: none">List of systems</option>
      <option data-ng-repeat="d in data" data-ng-model="systems">{{d.$id}}</option>
  </select>
</div>

<div class="form-group col-xs-6" id="equipList">
  <label for="selectequ">Select equipment list:</label>
  <select class="form-control" id="selectequ">
    <option value="" disabled="" selected="" style="display: none">List of equipments</option>
      <option>Equipments</option>
  </select>
</div>

JS

    app.controller('searchCtrl', ['$scope', '$firebaseObject', '$firebaseArray', function ($scope, $firebaseObject, $firebaseArray) {
    'use strict';

    var ref = firebase.database().ref();
        var data = ref.child("data");
        var list = $firebaseArray(data);

        list.$loaded().then(function(data) {
            $scope.data = data;
            console.log($scope.data);
        }).catch(function(error) {
            $scope.error = error;
        });
}]);

enter image description here

{
  "data" : {
    "System A" : {
      "equipments" : {
        "Equipment 1" : {
          "equipment" : "Equipment 1"
        }
      }
    },
    "System B" : {
      "equipments" : {
        "Equipment 1" : {
          "equipment" : "Equipment 1"
        },
        "Equipment 2" : {
          "equipment" : "Equipment 2"
        }
      }
    },
    "System C" : {
      "equipments" : {
        "s1" : {
          "equipment" : "s1"
        },
        "s2" : {
          "equipment" : "s2"
        },
        "s3" : {
          "equipment" : "s3"
        },
        "s4" : {
          "equipment" : "s4"
        },
        "s5" : {
          "equipment" : "s5"
        }
      }
    }
  }
}

Upvotes: 1

Views: 1301

Answers (1)

Maxim Shoustin
Maxim Shoustin

Reputation: 77904

This is your bind select with ngOptions:

When we choose currentSystem, we modify second select as:

key as key for (key, value) in data[currentSystem].equipments

HTML

<div>
  <select ng-model="currentSystem" 
          ng-options="key as key for (key, value) in data"
          ng-change="vm.onSystemChange(currentSystem)">
    <option value="" disabled="" selected="" style="display: none">List of systems</option>
  </select>
</div>

<div >
  <select ng-model="currentEquipment" 
           ng-options="key as key for (key, value) in data[currentSystem].equipments" 
      >
    <option value="" disabled="" selected="" style="display: none">List of equipments</option>
  </select>
</div>

This is JS part onSystemChange:

vm.onSystemChange = function(item){
   // once user is selected system, we take 1st key from second list
   var key =  Object.keys( $scope.data[$scope.currentSystem].equipments)[0]

    $scope.currentEquipment = 
    $scope.data[$scope.currentSystem].equipments[key].equipment;   
  }

Demo Plunker

I think this demo will be enough to sort things out and you can continue from here

Upvotes: 1

Related Questions