交换数据模型AngularJS动态的选择菜单 [英] Switching data models in AngularJS for dynamic select menus
问题描述
我所试图做的是有三种不同的<选择> 的菜单将被全部绑成相同的数据。改变第一选择菜单,将改变菜单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 em>的,如果attr.id传递给函数的ID相匹配,这必将推动数据备份环路到更新视图的范围。我只是真的停留在构建这一点,将AP preciate一定的指导和帮助,因为我真正的新AngularJS。谢谢! :)
为全面运作的jsfiddle如果有人能帮忙:
http://jsfiddle.net/sgdea/
查看一下我在这里所做的:的http://的jsfiddle .NET / sgdea / 2 /
您不需要使用 $观看
在所有 - 你只需要为每个依赖选择参考父选择的输入。
请注意 NG-选项
第二和第三选择参考 selected.site
,这是由设置第一个选择:
< DIV NG-应用=对myAppNG控制器=BookingCtrl>
<选择NG模型=selected.site
NG-选项=s.site对于s数据>
<期权价值=> - 站点 - < /选项>
< /选择>
<选择NG模型=selected.building
NG-选项=b.building为b在selected.site.buildings>
<期权价值=> - 建筑 - < /选项>
< /选择>
<选择NG模型=selected.floor
NG-选项=f.floor在selected.site.floors F>
<期权价值=> - 地板 - < /选项>
< /选择>
< / DIV>
我只在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屋!