AngularJS Combobox Dependent

Question

What I'm trying to achieve is to fill out a child statement with elements that depend on the "parent" field.

To clarify the problem - or better mine, I created a script from this link .

The combobox items must be filled every time the combobox group has been changed.

Controller:

function Controller( $scope ) { var groups = [ ]; // ommitted for the sake of clarity $scope.groups = groups; // <- linked to cboGroup $scope.currentGroup = groups[0]; // <- should be updated from combobox $scope.currentItems = $scope.currentGroup.Items; // <- linked to cboItems $scope.currentItem = $scope.currentItems[0]; // <- should be updated from cboItems } 

View

 <select data-ng-model="currentGroup" data-ng-options="group.Name for group in groups"></select> <select data-ng-model="currentItem" data-ng-options="item.Name for item in currentItems"></select> 

I can’t put it into practice declaratively. This should work without magical javascript - right?

Thank you for your support and a great day, Günther

Answer 1

You must specify currentGroup to populate the parameters inside the elements :

 <select data-ng-model="currentItem" data-ng-options="item.Name for item in currentGroup.Items"></select> 

You do not need $ scope.currentItems at all. So just update the last 2 lines inside the controller to:

 $scope.currentItem = $scope.currentGroup.Items[0]; 

Now, to remove the empty option, use the super lightweight and lightweight ng-change :

 <select data-ng-model="currentItem" data-ng-options="item.Name for item in currentGroup.Items" ng-change="groupChanged()"></select> 

Define the appropriate change handler in the controller:

 $scope.groupChanged = function(){ $scope.currentItem = $scope.currentGroup.Items[0]; } 

Answer 2

You can add an observer to the controller like this. You can also remove an empty item when you select a different value from the drop-down list.

 $scope.$watch('currentGroup', function () { $scope.currentItems = $scope.currentGroup.Items; $scope.currentItem = $scope.currentGroup.Items[0]; }); 

Demo

Answer 3

This should be what you need:

http://jsfiddle.net/TsxTU/1/

How this works is to use select syntax as label for item in group . Thus, for the first selection block, no matter which user selects, it will become an object attached to the currentGroup . A similar thing is done for currentItem

Then we can optionally use the $watch expression to notify about this update and make sure that currentItem updated to the first element in the array of the new Items group.

Answer 4

There is another solution to this kind of problem. That is, for broadcast.

Make a brodcast after you receive the data. In this example, the data comes from an Ajax call.

 $http.get('/SampleProgram/get_all_users').success(function(rsList){ $scope.users = rsList; $scope.$broadcast('I got all the users'); }); 

There must be listeners who always look after your broadcast message.

 $scope.$on('I got all the users', function () { alert("Hey All the users are here already let make another ajax call with those users"); })