递归模板中的 Angular ng-Options

Question

我可以在单个下拉列表中显示所有数据，但我想创建另一个下拉列表。

我的 JSON 数据如下所示：

[
{
    field: "tenantId",
    index: true,
    isRequired: true,
    instance: "String"
},

{
    field: "channels",
    index: null
},

{
    field: "contractedProducts",
    values: [
        {
            field: "variantId",
            index: null,
            instance: "String"
        },
        {
            field: "altExtProductId",
            index: null,
            instance: "String"
        }
    },
    {
        field: "prices",
        values: [
            {
                field: "variantId",
                index: null,
                instance: "String"
            },
            {
                field: "statusId",
                index: null,
                instance: "String"
            },
            {
                field: "currencyId",
                index: null,
                isRequired: true,
                instance: "String"
            },
            {
                field: "priceTypeId",
                index: null,
                instance: "String"
            }
        ]
    }
]

最初，我将在 JSON 上方的下拉列表中显示字段值。 例如，如果我从选择下拉列表中选择第一个字段值。那么它可以。但是如果我选择一个也有值字段的字段。例如：contractedProducts。所以当我选择contractedProducts 时，它应该动态生成另一个包含所有这些的选择下拉列表嵌套在其中的字段。！

编辑：

只需要在 HTML 中使用一个选择元素来生成它。有可能吗？

递归 HTML 标记：

<div class="row left">
            <div ng-repeat="condition in subcondition.conditions">
                <div class="form-inline" style="margin-bottom:10px;">
                    <div ng-repeat="key in condition.keys">
                        <div class="form-group mb-left">
                            <select class="form-control" ng-model="key" ng-options="s as s.field for s in staticValues|subDocumentsFilter:key:staticValues"  ng-change="recursiveSubdocuments(key, condition.indexOf(condition));" ng-init="keys[0].propertyId" required>
                                <option value="">choose one</option>
                            </select>
                        </div>
                    </div>
                    <custom-fields></custom-fields>
                    <div class="form-group mb-left">
                        <button ng-click="deleteExpression(condition, $parent.subcondition.conditions)"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>
                    </div>

                </div>
            </div>
        </div>
        <div class="row left">
            <div ng-repeat="subcondition in subcondition.subconditions" ng-include="'subcondtion'" ng-init="parent = $parent.$parent.subcondition"></div>
        </div>

角度代码：

var _scope = {};
        $scope.arrayValue = {};
        function condition() {
                this.keys =[{propertyId:'product'}],
                this.operator = '',
                this.value = ''
        }

        function subcondition() {
                this.allany = 'all',
                this.conditions = [new condition()],
                this.subconditions = []
        }
        // $scope.expressions = myExpression;
        $scope.expressions = [new subcondition()];

        $scope.staticJson = function() {
            $http.get('http://modulus-linkup-45480.onmodulus.net/getProductSchema')
                .success(function(data) {
                    $scope.staticValues = data.attributes;
               //      //  var out = [];
               //      // angular.forEach($scope.staticValues, function(d){
               //      //     angular.forEach(d.fields, function(v){
               //      //       out.push({propertyId: v.field})
               //      //     })
               //      // })
               // return out;
                }).error(function(error) {});
        }

Answer 1

如果所选项目有values，您可以使用 ngShow 的组合来显示相关下拉列表：

<select 
    ng-options="item.field for item in items"
    ng-model="item"
></select>

<select 
    ng-show="item.values"
    ng-options="sub.field for sub in item.values"
    ng-model="subitem"
></select>

演示： http://plnkr.co/edit/C7YKTDlynlcfkrlSCvQ0?p=preview