看看我在这里做了什么：http :
//jsfiddle.net/sgdea/2/
您根本不需要使用
$watch-您只需要使每个从属选择的输入引用父项中的选择即可。
请注意
ng-options第二个和第三个选择引用的
selected.site，这是由第一个选择设置的：
<div ng-app="myApp" ng-controller="BookingCtrl"> <select ng-model="selected.site" ng-options="s.site for s in data"> <option value="">-- Site --</option> </select> <select ng-model="selected.building" ng-options="b.building for b in selected.site.buildings"> <option value="">-- Building --</option> </select> <select ng-model="selected.floor" ng-options="f.floor for f in selected.site.floors"> <option value="">-- Floor --</option> </select></div>
我在javascript中所做的只是删除了您的
$watch：
var myApp = angular.module( 'myApp', [] );myApp.controller( 'BookingCtrl', ['$scope', '$location', function ( $scope, $location ) { $scope.selected = {}; $scope.data = [ { "id" : "0", "site" : "Brands Hatch", "buildings" : [ { "building" : "Building #1" }, { "building" : "Building #2" }, { "building" : "Building #3" } ], "floors" : [ { "floor" : "Floor #1" }, { "floor" : "Floor #2" }, { "floor" : "Floor #3" } ] },{ "id" : "1", "site" : "Silverstone", "buildings" : [ { "building" : "Building #4" }, { "building" : "Building #5" }, { "building" : "Building #6" } ], "floors" : [ { "floor" : "Floor #4" }, { "floor" : "Floor #5" }, { "floor" : "Floor #6" } ] } ];}]);
