在AngularJS下拉菜单

我在我的angular度应用程序中有两个下拉菜单。 当我在第一个下拉菜单中select一个选项时,我需要该选项来实现第二个下拉菜单。 例如:1st菜单将有一个状态消息列表。 当我select,比如说,“需要维护”时,会将第二个菜单更改为与维护相关的部门。 或者,如果我select状态“丢失”,则会将第二个菜单更改为与丢失状态相关的部门。 这是我的代码和设置:

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

这是我的控制器相关的HTML也张贴。

我知道如何从我的节点服务器获取我需要的信息,这些信息将包含信息。 当我在第一个菜单中点击一个选项时,所有需要帮助的东西都会改变第二个菜单中的选项。

我想只是有一个http.get调用时,单击一个选项,然后将填充第二个菜单。 第一个菜单将是静态的,不会改变。

我刚刚开始搞Angular和一个数据库,并能够dynamic地填充一个select基于另一个select。

下面是我的两个select框的HTML(我的第二个select是一个multiple ,但你可以显然删除该属性):

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

我有下面的控制器。 init函数清除两个select的所有数据源,检索表(第一个select ),将所选表设置为列表中的第一个表,然后调用第二个函数。

第二个函数(在select的表更改时也会调用,这要归功于ng-change指令)将检索选定表的元数据,并使用该元数据填充具有可用列的第二个select

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

也许你可以在第一个select中使用ng-change指令,并使用callback函数以你喜欢的方式(http调用或本地数据)填充第二个select。

如果你的Departments对象有一个Subject对象的引用,就像一个subject_id,你可以做一个filter:

例:

 <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 } ] }