То, что я пытаюсь сделать, это иметь три разных <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
Когда я выбираю "Бренды" или "Сильверстоун" из первого меню выбора, другие два меню будут изменять или обновлять данные, чтобы они соответствовали правильным данным. Я использую $watch для прослушивания изменений, которые я взял из вышеупомянутой ссылки CodePen.
Здесь просмотр script (немодифицированный и явно не работает):
$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 соответствует идентификатору, переданному в функцию, он возвращает данные обратно в область, которая обновляет представления, Я просто застрял в структурировании этого и был бы признателен за некоторые рекомендации и помощь, поскольку я действительно новичок в AngularJS. Спасибо!:)
jsFiddle для полной работы, если кто-то может помочь: http://jsfiddle.net/sgdea/