Question

我要做的是有三个不同的＆lt; select＆gt; 菜单，这些菜单都将被绑定到相同的数据中。更改第一个选择菜单，将更改菜单2和3的数据。

这是我的控制器内部：

$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匹配，则会将数据推回到更新视图的范围。我只是坚持构建这个，并希望得到一些指导和帮助，因为我是AngularJS的新手。谢谢！：）

如果有人可以提供帮助，jsFiddle可以完成所有工作： http://jsfiddle.net/sgdea/

Answer 1

看看我在这里做了什么：http://jsfiddle.net/sgdea/2/

您根本不需要使用$watch - 您只需要为每个相关选择引用输入父项中的选择。

请注意第一个选择设置的第二个和第三个参考引用ng-options的{{1}}：

selected.site

我在javascript中所做的就是删除您的<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>：

$watch

在AngularJS中切换数据模型以获得动态选择菜单

1 个答案: