AngularJS,填充依赖的Combobox

Question

我想要实现的是使用依赖于"父"组合框的项目填充子组合框.

为了澄清 - 或者更好的问题,我在这个链接下创建了一个小提琴.

每当组合框'组'发生变化时,组合框'项目'应该填充.

控制器:

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工作 - 不应该吗？

感谢您的支持,并度过了美好的一天,Günther

Answer 1

您应该引用currentGroup来填充项目组合框中的选项:

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

你根本不需要$ scope.currentItems.所以只需将控制器内的最后两行更新为:

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

现在要删除空选项,使用超级简单且轻量级的ng-change:

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

在控制器中定义相应的更改处理程序:

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