Javascript AngularJS中的下拉菜单

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

.controller（'HomeCtrl'，函数（$scope、$rootScope、$http、$ionicPlatform）{
//这将禁用用户返回上一个视图
$ionicPlatform.registerBackButtonAction（函数（事件）{
event.preventDefault（）；
}, 100);
//只有在消息屏幕上点击submit按钮时，才会调用此函数。它会将消息发送到服务器
$scope.submit=函数（）{
$http.post（'http://localhost:8000/', { 
messageText:$scope.messageText，
名称：window.localStorage.getItem（“用户名”）
});	
$scope.messageText=“”；//清除消息框
}
})

提交

也许您可以在第一个select上使用指令，并使用回调函数以您喜欢的方式（http调用或本地数据）填充第二个select。

如果您的Departments对象引用了Subject对象，比如Subject\u 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
}
]
}

学科
部门
var myApp=angular.module（'myApp'，[]）；
函数MyCtrl（$scope）{
$scope.subjects=[
{
id:1，
名称：“sub 1”，
},
{
id:2，
名称：“sub 2”，
}
];
$scope.depts=[
{
id:1，
姓名:"部门1"，
受试者编号：1
},
{
id:2，
姓名:"部门2"，
受试者编号：1
},
{
id:3，
姓名:"部门3",，
受试者编号：2
},
{
id:4，
名称:"副警司4"，
受试者编号：2
}
]
}

我刚刚开始摆弄Angular和一个数据库，能够根据另一个选择动态填充一个选择

下面是我的两个选择框的HTML（我的第二个选择是一个

multiple

，但您显然可以删除该属性）：

---

分享你的json以获得更好的答案；查看此链接以获取示例，您的意思是什么？我现在没有json。每当我使用http.get（）填充下拉列表时，我的数据都来自节点服务器中的mongodb。所以您选择了一个主题来显示相关部门？也许您可以创建一个过滤器，当您从第一个菜单中选择某些内容时，该过滤器将应用于第二个菜单。

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

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

...

});