Switching data models in AngularJS for dynamic select menus using nested objects in array

Question

Taking the concept of what was being asked here, and using this code:

markup:

<div ng-app="myApp" ng-controller="BookingCtrl">
<select ng-model="selected.site" ng-options="s.data as s.site for s in data">
    <option value="">-- Site --</option>
</select>
<select ng-model="selected.building" ng-options="b.data as b.building for b in selected.site.buildings">
    <option value="">-- Building --</option>
</select>
<select ng-model="selected.floor" ng-options="f.data as f.floor for f in selected.site.floors">
    <option value="">-- Floor --</option>
</select>

javascript:

var myApp = angular.module( 'myApp', [] );

myApp.controller( 'BookingCtrl', ['$scope', '$location', function ( $scope, $location ) {

$scope.selected = {};

$scope.data = [
    {
        "id" : "0",
        "site" : "Brands Hatch",
        "data" : 0,
        "buildings" : [
            { "building" : "Building #1", "data":1},
            { "building" : "Building #2", "data":2 },
            { "building" : "Building #3", "data":3 }
        ],
        "floors" : [
            { "floor" : "Floor #1", "data":1 },
            { "floor" : "Floor #2", "data":2 },
            { "floor" : "Floor #3", "data":3 }
        ]
    },{
        "id" : "1",
        "site" : "Silverstone",
        "data" : 1,
        "buildings" : [
            { "building" : "Building #4", "data":1 },
            { "building" : "Building #5", "data":2 },
            { "building" : "Building #6", "data":3 }
        ],
        "floors" : [
            { "floor" : "Floor #4", "data":1 },
            { "floor" : "Floor #5", "data":2 },
            { "floor" : "Floor #6", "data":3 }
        ]
    }
];

}]);

Accompanying fiddle

How do you go about changing the ng-options of other select dropdowns based off of the choice of another select?

All I did was add a "data" property to each object and update the ng-option.

Ulugbek · Accepted Answer · 2013-11-20T07:59:48.033

I've updated your fiddle here:

http://jsfiddle.net/Pb8GL/1/

I've edited your html a little bit:

<div ng-app="myApp" ng-controller="BookingCtrl">
    <select ng-model="selected.site" ng-options="s.data as s.site for s in data" ng-change="updateSelectedBuildingsAndFloors()">
        <option value="">-- Site --</option>
    </select>
    <select ng-model="selected.building" ng-options="b.data as b.building for b in selectedBuildings">
        <option value="">-- Building --</option>
    </select>
    <select ng-model="selected.floor" ng-options="f.data as f.floor for f in selectedFloors">
        <option value="">-- Floor --</option>
    </select>
</div>

and added ng-change function in Javascript:

$scope.updateSelectedBuildingsAndFloors = function(){
    $scope.selectedDataArray = $scope.data.filter(function (data) { return data.data == $scope.selected.site });        
    $scope.selectedData = $scope.selectedDataArray[0];
    $scope.selectedBuildings = $scope.selectedData.buildings;        
    $scope.selectedFloors = $scope.selectedData.floors;        
}

Let me know if it helps,

Ulugbek

UPDATE:

New jsfiddle, accounting for a case when there's no selected site: http://jsfiddle.net/Pb8GL/2/

That was it! Thanks! Now if I can just get the value of ng-model to select the correct item in the child select dropdown. It looks like ng-model and ng-options don't play well when there is an initial selected value. — rfender, Nov 20 '13 at 19:05
You need to initialize your data using **ng-init**. Since initially **selectedBuildings** and **selectedFloors** arrays are empty, you need to initialize them first based on **selected.site** and then set the values for **selected.building** and **selected.floor**. I've updated the jsfiddle: [New jsFiddle](http://jsfiddle.net/Pb8GL/4/) — Ulugbek, Nov 21 '13 at 05:52
Note that I'm also reseting values for **selected.building** and **selected.floor** on update, so that when the user changes the initial building it forgets the initial values and doesn't automatically select matching ids from new **selectedBuilding** and **selectedFloors** arrays. — Ulugbek, Nov 21 '13 at 05:57

Switching data models in AngularJS for dynamic select menus using nested objects in array

1 Answers1