AngularJS，填充依赖组合框

Question

我想要实现的是用依赖于“父”组合框的项目填充子组合框。

为了澄清 - 或者更好地我的 - 问题，我有 created a Fiddle under this link .

每次组合框“组”更改时，组合框“项目”都应填充。

Controller :

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

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

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

您不需要 $scope.currentItems 根本。因此，只需将 Controller 内的最后 2 行更新为:

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

现在删除空选项，使用 super 简单和轻量级 ng-change :

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

在 Controller 中定义相应的更改处理程序:

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