Переключение моделей данных в AngularJS для меню динамического выбора

То, что я пытаюсь сделать, это иметь три разных <select> которые будут привязаны к тем же данным. Изменение меню первого выбора приведет к изменению меню 2 и 3.

Вот что я пробовал из ссылки до сих пор, которая использует ту же самую идею, в которой я нуждаюсь: http://codepen.io/adnan-i/pen/gLtap

Когда я выбираю "Бренды" или "Сильверстоун" из первого меню выбора, другие два меню будут изменять или обновлять данные, чтобы они соответствовали правильным данным. Я использую $watch для прослушивания изменений, которые я взял из вышеупомянутой ссылки CodePen.

Здесь просмотр script (немодифицированный и явно не работает):

Насколько я знаю, это удаляет текущие данные об изменении, затем перебирает через $scope.data, и если attr.id соответствует идентификатору, переданному в функцию, он возвращает данные обратно в область, которая обновляет представления, Я просто застрял в структурировании этого и был бы признателен за некоторые рекомендации и помощь, поскольку я действительно новичок в AngularJS. Спасибо!:)

jsFiddle для полной работы, если кто-то может помочь: http://jsfiddle.net/sgdea/

Ответы

Ответ 1

Посмотрите, что я здесь сделал: http://jsfiddle.net/sgdea/2/

Вам вообще не нужно использовать $watch - вам просто нужно сделать входы для каждой зависимой ссылки выбора в родительском.

Обратите внимание, как ng-options для второй и третьей ссылки выбора selected.site, которая устанавливается при первом выборе:

<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>

Все, что я сделал в javascript, удалил ваш $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" }
            ]
        }
    ];
}]);