Question

我的角度应用程序中有两个下拉菜单。当我在第一个下拉菜单中选择一个选项时，我希望该选项影响第二个下拉菜单。示例：第一个菜单将包含状态消息列表。当我选择时，让我们说“需要维护”它会将第二个菜单更改为与维护相关的部门。或者，如果我选择“丢失”状态，它会将第二个菜单更改为与“丢失”状态相关的部门。这是我的代码和设置：

.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调用，然后填充第二个菜单。第一个菜单是静态的，不会改变。

Answer 1

也许您可以在第一次选择时使用ng-change指令并使用回调函数以您喜欢的方式填充第二个选择（http呼叫或本地数据）。

Answer 2

如果你的Departments对象有一个Subject对象的引用，比如subject_id，你可以只做一个过滤器：

示例：

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

Answer 3

我刚开始搞乱Angular和数据库，并且能够根据另一个选择动态填充一个选择。

以下是我的两个选择框的HTML（我的第二个选择是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），将所选表设置为第一个列表中的表，然后调用第二个函数。

第二个函数（由于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;
      });
    }
  } 

...

});

AngularJS中的下拉菜单

3 个答案: