我想要做的是拥有三个不同的 菜单，它们都将绑定(bind)到相同的数据中。更改第一个选择菜单，将更改菜单 2 和 3 的数据。

这是我的 Controller 的内部:

$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" }
            ]
        }
    ];

这是我迄今为止从引用中尝试过的内容，它使用了我需要的相同想法:http://codepen.io/adnan-i/pen/gLtap

当我从第一个 选择菜单中选择“Brands Hatch”或“Silverstone”时，其他两个菜单的数据将更改/更新以与正确的数据相对应。我正在使用 $watch 来监听更改，这是我从上面的 CodePen 链接中获取的。

这是观看脚本(未经修改且显然不起作用):

$scope.$watch('selected.id', function(id){
        delete $scope.selected.value;
        angular.forEach($scope.data, function(attr){
            if(attr.id === id){
                $scope.selectedAttr = attr;
            }
        });
    });

据我所知，这会在更改时删除当前数据，然后循环遍历 $scope.data，如果 attr.id 与传递给函数的 id 匹配，它会将数据推回更新 View 的范围。我只是真的坚持构建这个并且会感谢一些指导和帮助，因为我真的是 AngularJS 的新手。谢谢! :)

jsFiddle 的完整工作原理，如果有人可以提供帮助: http://jsfiddle.net/sgdea/

最佳答案

看看我在这里做了什么: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" }
            ]
        }
    ];
}]);

关于javascript - 在 AngularJS 中为动态选择菜单切换数据模型，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17700734/