私がやろうとしているのは、すべて同じデータに関連付けられる 3 つの異なる<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」を選択すると、他の 2 つのメニューのデータが変更/更新され、正しいデータに対応します。$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/