在 AngularJS 中为动态选择菜单切换数据模型 [英] Switching data models in AngularJS for dynamic select menus
问题描述
我想要做的是拥有三个不同的 菜单，它们都将绑定到相同的数据中.更改第一个选择菜单，将更改菜单 2 和 3 的数据.
这是我的控制器内部:
$scope.data = [{id":0"，"site" : "品牌孵化",建筑物":[{建筑":建筑#1"}，{建筑":建筑#2"}，{建筑":建筑#3"}],地板":[{楼层":楼层#1"}，{楼层":楼层#2"}，{楼层":楼层#3"}]},{"id" : "1","site" : "银石",建筑物":[{建筑":建筑#4"}，{建筑":建筑#5"}，{建筑":建筑#6"}],地板":[{楼层":楼层#4"}，{楼层":楼层#5"}，{楼层":楼层#6"}]}];这是我迄今为止从参考文献中尝试过的，它使用了我需要的相同想法:http://codepen.io/adnan-i/pen/gLtap
当我从 first 选择菜单中选择Brands Hatch"或Silverstone"时，其他两个菜单的数据将更改/更新以与正确的数据相对应.我正在使用 $watch 来监听更改，这是我从上面的 CodePen 链接中获取的.
这是观看脚本(未修改且显然不起作用):
$scope.$watch('selected.id', function(id){删除 $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/
看看我在这里做了什么:http://jsfiddle.net/sgdea/2/
您根本不需要使用 $watch -- 您只需要使每个依赖选择的输入引用父级中的选择即可.
注意第二个和第三个选择的ng-options是如何引用selected.site的，它是由第一个选择设置的:
<select ng-model="selected.site"ng-options="s.site for s in data"><option value="">-- 站点--</option></选择><select ng-model="selected.building"ng-options="b.building for b in selected.site.buildings"><option value="">-- 建筑--</option></选择><select ng-model="selected.floor"ng-options="f.floor for f in selected.site.floors"><option value="">-- 楼层--</option></选择>我在javascript中所做的就是删除您的$watch:
var myApp = angular.module('myApp', []);myApp.controller( 'BookingCtrl', ['$scope', '$location', function ( $scope, $location ) {$scope.selected = {};$scope.data = [{id":0"，"site" : "品牌孵化",建筑物":[{建筑":建筑#1"}，{建筑":建筑#2"}，{建筑":建筑#3"}],地板":[{楼层":楼层#1"}，{楼层":楼层#2"}，{楼层":楼层#3"}]},{"id" : "1","site" : "银石",建筑物":[{建筑":建筑#4"}，{建筑":建筑#5"}，{建筑":建筑#6"}],地板":[{楼层":楼层#4"}，{楼层":楼层#5"}，{楼层":楼层#6"}]}];}]);What I am trying to do is have three different <select> menus which will be all be tied into the same data. Changing the first select menu, will change menus 2 and 3's data.
This is the inside of my 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" }
]
}
];
Here's what I have tried from a reference so far, which uses the same idea I need: http://codepen.io/adnan-i/pen/gLtap
When I select either 'Brands Hatch' or 'Silverstone' from the first select menu, the other two menus will have their data change/update to correspond with the correct data. I am using $watch to listen for changes, which I've taken from the above CodePen link.
Here's the watching script (unmodified and obviously not working):
$scope.$watch('selected.id', function(id){
delete $scope.selected.value;
angular.forEach($scope.data, function(attr){
if(attr.id === id){
$scope.selectedAttr = attr;
}
});
});
As far as I know, this deletes the current data on change, then loops through $scope.data and if the attr.id matches the id passed into the function, it pushes the data back to the scope which updates the views. I am just really stuck on structuring this and would appreciate some guidance and help as I am really new to AngularJS. Thank you! :)
jsFiddle for the full workings if anyone can help out: http://jsfiddle.net/sgdea/
Check out what I've done here: http://jsfiddle.net/sgdea/2/
You don't need to use $watch at all -- you just need to make the inputs for each dependent select reference the selection in the parent.
Note how the ng-options for the second and third select reference selected.site, which is set by the first select:
<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>
All I did in the javascript was remove your $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" }
]
}
];
}]);
这篇关于在 AngularJS 中为动态选择菜单切换数据模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
