交换数据模型AngularJS动态的选择菜单 [英] Switching data models in AngularJS for dynamic select menus
问题描述
我所试图做的是有三种不同的＆LT;选择＆GT; 的菜单将被全部绑成相同的数据。改变第一选择菜单，将改变菜单2和3的数据。
这是我的控制器内：
$ scope.data = [
{
ID：0
网站：布兰兹哈奇
楼：[
{楼：建＃1}，
{楼：2号楼}，
{楼：3号楼}
]
地板：[
{地板：地板＃1}，
{地板：地板＃2}，
{楼：楼＃3}
]
}，{
ID：1
网站：银石，
楼：[
{楼：楼＃4}，
{楼：楼＃5}，
{楼：6号楼}
]
地板：[
{地板：地板＃4}，
{楼：楼＃5}，
{地板：地板＃6}
]
}
];
下面是我从到目前为止的参考，它采用了同样的想法，我需要尝试： HTTP：/ /$c$cpen.io/adnan-i/pen/gLtap
当我选择'布兰兹哈奇或银石从第一个的选择菜单，另外两个菜单都会有自己的数据改变/更新与正确的数据来对应。我使用的 $手表的侦听变化，我从上面的codePEN链接服用。
这里是观赏脚本（未修改显然不工作）：
$范围。$腕表（'selected.id'，函数（ID）{
删除$ scope.selected.value;
angular.forEach（$ scope.data，功能（ATTR）{
如果（attr.id === ID）{
$ scope.selectedAttr =属性;
}
}）;
}）;
据我所知，这将删除上改变目前的数据，然后通过的 $ scope.data 的，如果attr.id传递给函数的ID相匹配，这必将推动数据备份环路到更新视图的范围。我只是真的停留在构建这一点，将AP preciate一定的指导和帮助，因为我真正的新AngularJS。谢谢！ ：）
为全面运作的jsfiddle如果有人能帮忙：
http://jsfiddle.net/sgdea/
查看一下我在这里所做的：的http：//的jsfiddle .NET / sgdea / 2 /
您不需要使用 $观看在所有 - 你只需要为每个依赖选择参考父选择的输入。
请注意 NG-选项第二和第三选择参考 selected.site ，这是由设置第一个选择：
＆LT; DIV NG-应用=对myAppNG控制器=BookingCtrl＆GT;
＆LT;选择NG模型=selected.site
NG-选项=s.site对于s数据＆GT;
＆LT;期权价值=＆GT; - 站点 - ＆LT; /选项＆GT;
＆LT; /选择＆GT;
＆LT;选择NG模型=selected.building
NG-选项=b.building为b在selected.site.buildings＆GT;
＆LT;期权价值=＆GT; - 建筑 - ＆LT; /选项＆GT;
＆LT; /选择＆GT;
＆LT;选择NG模型=selected.floor
NG-选项=f.floor在selected.site.floors F＆GT;
＆LT;期权价值=＆GT; - 地板 - ＆LT; /选项＆GT;
＆LT; /选择＆GT;
＆LT; / DIV＆GT;
我只在JavaScript所做的是删除你的 $观看：
VAR对myApp = angular.module（'对myApp'，[]）;myApp.controller（'BookingCtrl'，['$范围，$位置'，函数（$范围，$位置）{ $ scope.selected = {}; $ scope.data = [
{
ID：0
网站：布兰兹哈奇
楼：[
{楼：建＃1}，
{楼：2号楼}，
{楼：3号楼}
]
地板：[
{地板：地板＃1}，
{地板：地板＃2}，
{楼：楼＃3}
]
}，{
ID：1
网站：银石，
楼：[
{楼：楼＃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屋！
