Question

我正在尝试显示我在第一个下拉列表中选择的系统的设备。虽然我不确定如何完成这一点。我曾想过使用ng-model但我不知道如何使用它来完成我的任务！我在本文末尾包含了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

_{我认为这个演示足以解决问题，你可以从这里继续}

使用下拉列表1中的选项填充下拉列表2 - firebase

1 个答案: