我想做的是拥有三个不同的<select>菜单,它们都将绑定到相同的数据中。更改第一个选择菜单,将更改菜单 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/