ドロップダウンのオプションを使用してドロップダウン2を投入する1 - firebase

Question

最初のドロップダウンで選択したシステムの機器を表示しようとしています。私はそれを正確に達成する方法についてはわかりませんが。私はNGモデルを使用することを考えましたが、私はそれを使用して私の仕事を達成する方法を知らない！私はこの記事の最後にjson形式を含めました。ありがとうございました。

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

{ 
    "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" 
     } 
     } 
    } 
    } 
} 

Answer 1

これはあなたのバインドがngOptionsを選択します：

我々はcurrentSystemを選択すると、私たちは第二として選択変更：

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> 

これは、JSの一部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

---

_{このデモは物事を整理するのに十分だと思います。ここから続けることができます。}