Dropdown menus in AngularJS

Question

I have two dropdown menus in my angular app. When I select an option in the 1st dropdown menu, I want that choice to effect the 2nd dropdown menu. Example: 1st menu will have a list of status messages. When I select, let's say, "Need Maintenance" It will change the 2nd menu to the departments relevant to the Maintenance. Or if I choose the status "Lost", it will change the 2nd menu to the departments relevant to the Lost status. Here is my code and setup:

.controller('HomeCtrl', function($scope, $rootScope, $http, $ionicPlatform) {
	// This disables the user from being able to go back to the previous view
	$ionicPlatform.registerBackButtonAction(function (event) {
		event.preventDefault();
	}, 100);
	
	// This function only gets called  when the submit button is hit on the messaging screen. It posts to server for sending of message
    $scope.submit = function() {
        	$http.post('http://localhost:8000/', { 
				messageText: $scope.messageText, 
				name: window.localStorage.getItem("username")
			});	
			$scope.messageText = ""; //clearing the message box
		}
})

<div class="form1" ng-controller="HomeCtrl">
              <form class="form">
				<select placeholder="Select a Subject" ng-model="selectSubject" data-ng-options="option.subject for option in subject"></select>
				  
				<select placeholder="Select a Department" ng-model="selectDept" data-ng-options="option.dept for option in dept"></select> 
                  
                <input type="text" class="messageText" placeholder="Message" ng-model="messageText">
                 
                <button class="button" ng-click="submit()"><span>Submit</span></button>
              </form>      
          </div>

That is my controller relevant to the html that is also posted.

I know how to get the information I need from my node server which will be housing the information. All I need help figuring out is changing the options within the 2nd menu when a option is clicked in the 1st menu.

I am thinking just having a http.get call when a option is clicked which will then populate the 2nd menu. The first menu will be static, not changing.

Answer 1

I've just started messing around with Angular and a database and and was able to dynamically populate one select based on the choice in another.

Below is the HTML for my two select boxes (my second select is a multiple, but you can obviously remove that attribute):

<label>Select a Table</label>
<select name="tableDropDown" id="tableDropDown" 
  ng-options="table.name for table in data.availableTables"
  ng-model="data.selectedTable"
  ng-change="getTableColumns()">
</select>

<label>Select Columns</label>
<select name="columnMultiple" id="columnMultiple"
  ng-options="column.name for column in data.availableColumns"
  ng-model="data.selectedColumns"
  multiple>
</select>

And I have the controller below. The init function clears all of the data sources for the two select's, retrieves the list of tables (for the first select), sets the selected table to the first table in the list, and then calls the second function.

The second function (which is also called whenever the selected table changes, thanks to the ng-change directive) retrieves the metadata for the selected table and uses it to populate the second select with the list of available columns.

.controller('SimpleController', function($scope, $http) {

  init();

  function init() {
    $scope.data = {
      availableTables: [],
      availableColumns: [],
      selectedTable: {}
    };

    $http.get("http://some.server.address")
    .then(function (response) {
      $scope.data.availableTables = response.data.value;
      $scope.data.selectedTable = $scope.data.availableTables[0];
      $scope.getTableColumns();
    });
  }

  $scope.getTableColumns = function () {
    $scope.data.selectedColumns = [];
    table = $scope.data.selectedTable.url;
    if (table != "") {
      $http.get("http://some.server.address/" + table + "/$metadata?@json")
      .then(function (response) {
        $scope.data.availableColumns = response.data.value;
      });
    }
  } 

...

});

Answer 2

maybe you can use the ng-change directive on the 1st select and using the callback function to populate the 2nd select in the way you prefer( http call or local data).