Question

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

为了澄清 - 或者更好我的问题，我有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

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];
}

Answer 2

您可以像这样将控制器添加到控制器。 当您从第一个下拉列表中选择不同的值时，也可以删除空项目。

$scope.$watch('currentGroup', function () {
    $scope.currentItems = $scope.currentGroup.Items;
    $scope.currentItem = $scope.currentGroup.Items[0];
});

的 Demo

Answer 3

这应该是你想要的：

http://jsfiddle.net/TsxTU/1/

这是如何工作的，它使用select作为label item group语法。因此，对于第一个选择框，用户选择的任何内容都将成为绑定到currentGroup的对象。对currentItem

也做了类似的事情

然后，我们可以选择使用$watch表达式来通知该更新，并确保currentItem更新新组Items数组中的第一项。

Answer 4

此类问题还有其他解决方案。那是广播。

获得数据后做广播。在此示例中，数据来自Ajax调用。

$scope.$on('I got all the users', function () {
        alert("Hey All the users are here already let's make another ajax call with those users");
    })

应该有听众总是为你的广播信息保持警惕。

public function oceanupload(){
    $this->getRejectedR11($code,$countryName,$type);
}

function getRejectedR11($code,$countryName,$type){

    $count = RejectedR11::count();
    $chunksize = 30000;
    $chunks = floor($count / $chunksize);
    for ($chunk = 0; $chunk <= $chunks; $chunk++) {
        $offset = $chunk * $chunksize;
        $data = RejectedR11::skip($offset)->take($chunksize)->get();
       if(!empty($data)){
            OceanUpload::insertRejected($data,$code,$type);
            //RejectedR11::deleteRejectedR11($data);
       }
    }

}

AngularJS，填充依赖的Combobox

4 个答案: