Javascript 使用数组中的嵌套对象在AngularJS中切换动态选择菜单的数据模型

采用所问问题的概念，并使用以下代码：

标记：

<div ng-app="myApp" ng-controller="BookingCtrl">
<select ng-model="selected.site" ng-options="s.data as s.site for s in data">
    <option value="">-- Site --</option>
</select>
<select ng-model="selected.building" ng-options="b.data as b.building for b in selected.site.buildings">
    <option value="">-- Building --</option>
</select>
<select ng-model="selected.floor" ng-options="f.data as f.floor for f in selected.site.floors">
    <option value="">-- Floor --</option>
</select>

控制器（'BookingCtrl'，['$scope'，'$location'，函数（$scope，$location）{

}]))

伴随

如何根据另一个选择更改其他选择下拉列表的ng选项

---

我所做的只是为每个对象添加一个“数据”属性并更新ng选项。

我在这里更新了您的小提琴：

我对您的html进行了一些编辑：

<div ng-app="myApp" ng-controller="BookingCtrl">
    <select ng-model="selected.site" ng-options="s.data as s.site for s in data" ng-change="updateSelectedBuildingsAndFloors()">
        <option value="">-- Site --</option>
    </select>
    <select ng-model="selected.building" ng-options="b.data as b.building for b in selectedBuildings">
        <option value="">-- Building --</option>
    </select>
    <select ng-model="selected.floor" ng-options="f.data as f.floor for f in selectedFloors">
        <option value="">-- Floor --</option>
    </select>
</div>

如果有帮助，请告诉我

乌卢格贝克

更新：

---

新的JSFIDLE，说明没有选定站点时的情况：

我在这里更新了您的FIDLE：

我对您的html进行了一些编辑：

<div ng-app="myApp" ng-controller="BookingCtrl">
    <select ng-model="selected.site" ng-options="s.data as s.site for s in data" ng-change="updateSelectedBuildingsAndFloors()">
        <option value="">-- Site --</option>
    </select>
    <select ng-model="selected.building" ng-options="b.data as b.building for b in selectedBuildings">
        <option value="">-- Building --</option>
    </select>
    <select ng-model="selected.floor" ng-options="f.data as f.floor for f in selectedFloors">
        <option value="">-- Floor --</option>
    </select>
</div>

如果有帮助，请告诉我

乌卢格贝克

更新：

---

新的JSFIDLE，解释了没有选定站点的情况：

就是这样！谢谢现在，如果我能得到ng model的值，在child select下拉列表中选择正确的项。当存在初始选定值时，ng模型和ng选项似乎不起作用。您需要使用ng init初始化数据。由于最初选择的Buildings和selectedFloors阵列为空，因此需要首先基于selected.site对其进行初始化，然后设置selected.Buildings和selected.floor的值。我已经更新了JSFIDLE：注意，我还在更新时重置selected.building和selected.floor的值，这样当用户更改初始建筑时，它会忘记初始值，并且不会自动从新selectedBuilding和selectedFloors数组中选择匹配的ID。就是这样！谢谢现在，如果我能得到ng model的值，在child select下拉列表中选择正确的项。当存在初始选定值时，ng模型和ng选项似乎不起作用。您需要使用ng init初始化数据。由于最初选择的Buildings和selectedFloors阵列为空，因此需要首先基于selected.site对其进行初始化，然后设置selected.Buildings和selected.floor的值。我已经更新了JSFIDLE：注意，我还在更新时重置selected.building和selected.floor的值，这样当用户更改初始建筑时，它会忘记初始值，并且不会自动从新selectedBuilding和selectedFloors数组中选择匹配的ID。

<div ng-app="myApp" ng-controller="BookingCtrl">
    <select ng-model="selected.site" ng-options="s.data as s.site for s in data" ng-change="updateSelectedBuildingsAndFloors()">
        <option value="">-- Site --</option>
    </select>
    <select ng-model="selected.building" ng-options="b.data as b.building for b in selectedBuildings">
        <option value="">-- Building --</option>
    </select>
    <select ng-model="selected.floor" ng-options="f.data as f.floor for f in selectedFloors">
        <option value="">-- Floor --</option>
    </select>
</div>

$scope.updateSelectedBuildingsAndFloors = function(){
    $scope.selectedDataArray = $scope.data.filter(function (data) { return data.data == $scope.selected.site });        
    $scope.selectedData = $scope.selectedDataArray[0];
    $scope.selectedBuildings = $scope.selectedData.buildings;        
    $scope.selectedFloors = $scope.selectedData.floors;        
}