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.

Share your json for better answer; check this link for examples advancesharp.com/blog/1189/… — Ali Adravi
– Ali Adravi, Commented Sep 7, 2016 at 18:44
What do you mean? I don't have json right now. My data is coming from a mongodb db in a node server whenever I do a http.get() to populate the dropdown. — Austin Hunter
– Austin Hunter, Commented Sep 7, 2016 at 18:45
So you select a subject to show relevant departments? Maybe you can create a filter that gets applied to your second menu when you pick something from the first menu. — user2677821
– user2677821, Commented Sep 7, 2016 at 19:02

Jerod Johnson · Accepted Answer · 2016-09-07 19:05:05Z

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;
      });
    }
  } 

...

});

Andre.Anzi · Accepted Answer · 2016-09-07 19:00:54Z

1

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

answered Sep 7, 2016 at 19:00

Andre.Anzi

1516 bronze badges

Comments

Makarov · Accepted Answer · 2016-09-07 19:02:00Z

if your Departments objects has a references to the Subject object, something like a subject_id, you can just do a filter:

Example:

<div ng-controller="MyCtrl">
   subjects
   <select placeholder="Select a Subject" ng-model="selectSubject" ng-options="subject.name for subject in subjects"></select>
   departmets
   <select placeholder="Select a Department" ng-model="selectDept" ng-options="dept.name for dept in depts | filter:{ subject_id : selectSubject.id }"></select>
</div>

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

function MyCtrl($scope) {
$scope.subjects = [
{
    id: 1,
  name: "sub 1",

},
{
    id: 2,
  name: "sub 2",

}
];
$scope.depts = [
{
    id: 1,
  name: "Dep 1",
  subject_id: 1
},
{
    id: 2,
  name: "Dep 2",
  subject_id: 1
},
{
    id: 3,
  name: "Dep 3",
  subject_id: 2
},
{
    id: 4,
  name: "Dep 4",
  subject_id: 2
}
]
}

Collectives™ on Stack Overflow

Dropdown menus in AngularJS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related