AngularJS，填充组合框依赖 [英] AngularJS, Populating dependent Combobox

问题描述

我试图做到的，是来填充项的组合框孩子依赖于一个父组合框。

What I am trying to achieve is to populate a child combobox with items which depend on a 'parent' combobox.

要澄清 - 或更好的我 - 的问题，我有此链接下创建的小提琴。

To clarify the - or better my - problem, I have created a Fiddle under this link.

组合框'项目'应该填充每个组合框组已经改变了时间。

The combobox 'items' should populate every time the combobox 'group' has changed.

控制器：

function Controller( $scope ) {

var groups = [ ]; // ommitted for the sake of clarity

$scope.groups = groups;                 // <- linked to cboGroup
$scope.currentGroup = groups[0];        // <- should be updated from combobox
$scope.currentItems = $scope.currentGroup.Items;  // <- linked to cboItems
$scope.currentItem = $scope.currentItems[0];      // <- should be updated from cboItems
}

查看

<select data-ng-model="currentGroup" data-ng-options="group.Name for group in groups"></select>
<select data-ng-model="currentItem" data-ng-options="item.Name for item in currentItems"></select>

我不能把这个生活声明。这应该不用魔法JavaScript的工作 - ？应该不会吧。

I can't bring this to life declaratively. This should work without magic javascript - shouldn't it?

感谢您的支持，并有一个伟大的日子，半滑舌鳎

Thank you for your support and have a great day, Günther

推荐答案

您应该参考的 currentGroup 以填充里面的选项项组合框：

You should refer currentGroup to populate the options inside items combobox:

<select data-ng-model="currentItem" data-ng-options="item.Name for item in currentGroup.Items"></select>

您不需要的 $ scope.currentItems 在所有。所以，刚刚过去的2线控制器内更新到：

You dont need $scope.currentItems at all. So just update the last 2 lines inside the controller to:

$scope.currentItem = $scope.currentGroup.Items[0];  

现在删除空选项，使用超级简单，重量轻的 NG-变化

Now to remove the empty option, use super easy and light-weight ng-change:

<select data-ng-model="currentItem" data-ng-options="item.Name for item in currentGroup.Items" ng-change="groupChanged()"></select>

定义相应的改变处理程序控制器：

Define the corresponding change handler in the controller:

$scope.groupChanged = function(){
    $scope.currentItem = $scope.currentGroup.Items[0];
}

这篇关于AngularJS，填充组合框依赖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！