angularjs：级联下拉列表 [英] angularjs: cascade dropdown

问题描述

我想实现角度级联下拉。我认为这将只是由于工作自然地结合。见下图：

I'm trying to achieve a cascade dropdown in Angular. I thought it would just work naturally thanks to binding. See below:

<select name="client" ng-model="selectedRequest.client" ng-options="c.name for c in clients track by c.id" required></select>
<select id="department" ng-model="selectedRequest.department" ng-options="d.defaultLabel for d in selectedRequest.client.departments track by d.id"></select>

当视图被加载，它的工作，我可以看到符合相应绑定到客户的部门。然而，每当selectedRequest.client变化，为部门下拉源应该改变太多，而是它变空。

When the view is loaded, it works, I can see the departments matching those bound to the client. However, whenever the selectedRequest.client changes, the source for the department dropdown should change too, but instead it becomes empty.

修改

我已经改变了孩子下拉菜单：

I've changed the child dropdown to :

<select id="department" ng-model="selectedRequest.department" ng-options="d.defaultLabel for d in departments track by d.id | filter:{clientId: selectedRequest.client.id}"></select>

但这次它加载所有部门在下拉列表中，忽略了过滤器。

but this time it loads all the departments in the dropdown, ignoring the filter.

**编辑2 **

更改为：

 <select name="client" ng-model="requestService.selectedRequest.client" ng-options="c as c.name for c in clients track by c.id" required></select>

 <select id="department" ng-model="requestService.selectedRequest.department" ng-options="d.defaultLabel for d in departments  | filter:{clientId: requestService.selectedRequest.client.id}"></select>

现在正确地源改变时，选择了一个客户端。然而初始选择，即设置在启动时右部，不工作。那是因为我已经删除了位'按id的轨道。

Now the source changes correctly when a client is selected. However the initial selection, i.e setting the right department at startup, does not work. That's because I've removed the 'track by id' bit.

推荐答案

正确的方法是

 <select id="department" ng-model="selectedRequest.department" ng-options="d.defaultLabel for d in departments | filter:{clientId: selectedRequest.client.id} track by d.id "></select>

这只是我还没有把过滤器在正确的地方......愚蠢的错误。

it's just that I hadn't put the filter at the right place... silly mistake.

这篇关于angularjs：级联下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！