Angular JS中的条件下拉值填充答案

【问题标题】：Conditional Drop down values population in Angular JSAngular JS中的条件下拉值填充
【发布时间】：2016-07-18 14:42:17
【问题描述】：

我的 UI 中有两个下拉菜单，例如 Group Types 和 Sub Group Types。

    <div class="form-group row">
        <label for="GroupType" class="col-sm-4 form-control-label">Group Type: </label>
        <div class="col-sm-8">
            <select name="selGroupType" id="selGroupType" class="form-control" ng-change="referenceAddRecord.populateGroupTypeDetails(selGroupType)" ng-options="groupType.value for groupType in referenceAddRecord.groupTypes track by groupCode.id" ng-model="referenceAddRecord.groupType"></select>
        </div>
    </div>
    <div class="form-group row">
        <label for="SubGroupType" class="col-sm-4 form-control-label">Sub Group Type: </label>
        <div class="col-sm-8">
            <select name="selSubGroupType" id="selSubGroupType" class="form-control" ng-change="referenceAddRecord.populateSubGroupTypeDetails(selSubGroupType)" ng-options="subGroupType.value for subGroupType in referenceAddRecord.subGroupTypes track by subGroupType.id" ng-model="referenceAddRecord.subGroupType"></select>
        </div>
    </div>

在我的控制器中，我在读取 JSON 文件后绑定值，例如

referenceDataDropDownService.getDropDown(REFERENCE_DATA_CONSTANTS.GROUP_TYPE).success(function (result) {
    $scope.referenceAddRecord.groupTypes = result;
}).error(function (result) {
    alert("Unable to retrieve dropdown values");
});

referenceDataDropDownService.getDropDown(REFERENCE_DATA_CONSTANTS.SUB_GROUP_TYPE).success(function (result) {

    $scope.referenceAddRecord.subGroupTypes = result;
}).error(function (result) {
    alert("Unable to retrieve dropdown values");
});

现在我希望 Sun Group Types 值取决于下拉列表中选择的 Group Type 值。

因此，例如对于 Sub Group Types 第二个下拉菜单，结果是对象的集合，例如：

对于 Group Types 下拉列表，结果如下所示：

现在，只有选择了 Group Type 下拉列表中的 “Chapter Event” ，然后对于该 id ，我想从 sub group types 下拉列表中选择值，其中 value 有id (5) 连接。

像 'Auction' 应该显示为值为 'Auction|5' 。同样，应该显示值。

我该怎么做？

此外，默认情况下，加载时，无论选择何种组类型，都应相应地填充子组类型。

请帮忙。

【问题讨论】：

您要过滤对象吗？

标签： javascript angularjs drop-down-menu

【解决方案1】：

如果我理解您的问题，您正在尝试根据另一个选择过滤一个选择的选项。为此，您只需在第二个选择的 ng-options 指令中添加一个过滤器。像这样：

ng-options="subGroupType.value for subGroupType in referenceAddRecord.subGroupTypes | filter: {id: referenceAddRecord.groupType.id} track by subGroupType.id"

这是一个有效的plunk

【讨论】：