javascript – 在AngularJS中切换动态选择菜单的数据模型

我想要做的是有三种不同的选择这些菜单都将被绑定到相同的数据中.更改第一个选择菜单,将更改菜单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

当从第一个选择菜单中选择“品牌填充”或“银石”时,其他两个菜单将会将其数据更改/更新与正确的数据对应.我正在使用$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.谢谢！