AngularJS,填充依赖的Combobox

发布时间：2020-12-17 17:52:48 所属栏目：安全来源：网络整理

导读：我想要实现的是使用依赖于“父”组合框的项目填充子组合框. 为了澄清 – 或者更好的问题,我有created a Fiddle under this link. 每当组合框’组’发生变化时,组合框’项’应填充. 控制器： function Controller( $scope ) {var groups = [ ]; // ommitted f

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

为了澄清 – 或者更好的问题,我有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];
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!