Javascript 递归模板中的参数化选项

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

我的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时，它应该动态生成另一个包含嵌套在其中的所有字段的“选择”下拉列表

编辑：

<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) {});
        }

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

递归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) {});
        }

---

如果所选项目具有

值

，则可以使用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>

---

演示：

那么“当我选择contractedProducts时，它应该动态生成另一个包含所有这些字段的select下拉列表”是什么意思？请忽略上述注释。所有内容都保持不变，但只使用一个select标记。我也给出了angular和HTML代码。它的递归模板将根据json值无限生成。

<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) {});
        }