我想要实现的是使用依赖于“父”组合框的项目填充子组合框.
为了澄清 – 或者更好的问题,我有created a Fiddle under this link.
每当组合框’组’发生变化时,组合框’项’应填充.
控制器：
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
解决方法
您应该引用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];
}
