AngularJS 中的下拉菜单
Posted
技术标签:
【中文标题】AngularJS 中的下拉菜单【英文标题】:Dropdown menus in AngularJS 【发布时间】:2017-01-15 13:35:07 【问题描述】:我的 Angular 应用中有两个下拉菜单。当我在第一个下拉菜单中选择一个选项时,我希望该选择影响第二个下拉菜单。示例:第一个菜单将包含状态消息列表。当我选择“需要维护”时,它会将第二个菜单更改为与维护相关的部门。或者如果我选择“丢失”状态,它会将第二个菜单更改为与丢失状态相关的部门。这是我的代码和设置:
.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 ,然后将填充第二个菜单。第一个菜单将是静态的,不会改变。
【问题讨论】:
分享您的 json 以获得更好的答案;检查此链接以获取示例advancesharp.com/blog/1189/… 什么意思?我现在没有json。每当我执行 http.get() 来填充下拉列表时,我的数据都来自节点服务器中的 mongodb 数据库。 所以你选择一个主题展示相关部门?也许您可以创建一个过滤器,当您从第一个菜单中选择某些内容时,该过滤器将应用于您的第二个菜单。 【参考方案1】:我刚刚开始使用 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;
);
...
);
【讨论】:
【参考方案2】:也许您可以在第一次选择中使用ng-change 指令,并使用回调函数以您喜欢的方式(http 调用或本地数据)填充第二次选择。
【讨论】:
【参考方案3】:如果您的 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
]
【讨论】:
以上是关于AngularJS 中的下拉菜单的主要内容,如果未能解决你的问题,请参考以下文章