current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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.

share|improve this question

1 Answer 1

up vote 0 down vote accepted

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/

share|improve this answer
    
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 –  Ulugbek Nov 21 '13 at 5: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 5:57

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.