Question

我在使用angularJS的页面上有两个多选下拉列表。第一个是从服务调用填充的，该服务调用返回基本上是类别对象的对象列表。第二个下拉列表是所有这些类别的所有细节的列表。为简单起见，我们将它们称为组和项目。最初，我刚刚使用第二个api调用填充了第二个列表，该调用返回了这些项目的列表。但由于Group对象已经包含了相关Items的列表，因此这似乎是不必要的。（并且我希望能够将两者结合在一起，这样如果选择了一个组，则只有属于该组的项目会显示在第二个下拉列表中，但那个次要... ）我的第一个下拉列表填充了以下代码：

    $scope.promiseGetGroupNames = providerContactInfoService.getGroupNames();
    $scope.promiseGetGroupNames.then(function (pl) {
            $scope.GroupDDLdata = pl.data;
        }, function (errorPl) {
            //error message...
        });

所以我假设在那里我可以遍历数据并在那里生成一个列表，但看起来像angular会有一种更简单的做事方式......有没有办法我可以设置选项第二个下拉列表是第一个中所有组中的项目的完整列表，然后当用户选择其中一个组时，除了属于该类别的项目之外的所有项目除外？

此外，我已经研究了这个，并找到了一些答案，看起来有一种方法可以将第二个下拉列表的ng-options连接到第一个的ng-model，这似乎就像我想做的那样，至少下半场，但我仍然需要在页面加载时获得所有选项......

我的另一个想法是简单地进行两次服务调用...第一次抽取所有可能的项目，第二次抽取一个只属于组选择的子集...因为只允许一个组要被选中，它的效率并不是非常低，但是如果这个人选择了一个组，那么另一个组......如果可以连接所有的对象/选项/那么这似乎是不必要的。一起模特......

这种情况的最佳做法是什么，如果它是第一种，有人可以解释一下如何建立连接吗？我理解从模型中提取可能选项的基础知识，但不完全确定语法（我对angularJS来说相对较新。）

Answer 1

这样的事情怎么样？

1）填充您的第一个下拉列表：

<select ng-options="groups" ng-model="selectedGroup">

$scope.init = function () {
    service.getGroups.then(function (groups) {
        $scope.groups = groups;
    });
};

$scope.init();

2）在第一个下拉列表中使用ng-change指令：

<select ng-options="groups" ng-change="fillSecondList()" ng-model="selectedGroup">

<select ng-options="secondList" ng-model="selectedThing">

$scope.fillSecondList = function () {
    // Whatever you want, you can use $scope.selectedGroup here    
    $scope.secondList = ...
};

当您的选择发生变化时，

$scope.fillSecondList会触发，因此您可以根据在第一个列表（$scope.secondList）中选择的内容更新$scope.selectedGroup，例如使用服务调用selectedGroup作为参数。

编辑：

如果您从第一次服务电话中获取了所有需要的数据，则可以使用过滤器，因为您实际上并不需要修改secondList模型，而是更改第二个列表中显示的内容

$scope.init = function () {
        service.getGroups.then(function (groups) {
            $scope.groups = groups;
            // Extract the second list from the first one
            $scope.secondList = groups.doSomething();
        });
    };

<select ng-options="secondList | filter: { group : selectedGroup.id }" ng-model="selectedThing">

例如，这只会显示secondList属性等于group的{{1}}项。

如果你的过滤比较复杂，你可以使用自定义过滤器，或者如果你不打算在其他任何地方重新使用这个过滤器，你可以使用控制器中的过滤功能（通过ng-change触发）：

selectedGroup.id

2下拉列表，1个对象ID，其他与对象列表中的列表

1 个答案: