如何展平嵌套的嵌套对象数组

Question

我正在为细分数据构建输入应用程序。 每个细分可以包含1到n个部分。 我的目标是使用所需的输入，文本框，单选框，复选框等动态填充ui。我将来自多个源的数据组合到单个数组中。 由于这是动态的，因此我创建了将模型更改为唯一名称的服务。 当前情况的屏幕截图

我需要帮助的问题是复选框。 我无法从html访问它们。 这是我如何访问嵌套数组的示例。 这很好。

 <tbody>
            <tr ng-repeat="item in section.sectionBuilderDeveloper">
                <td class="bd-td">{{item.type}}</td>
                <td>{{item.name}}</td>
                <td class="radio-td">
                    <div class="radio radio-info radio-inline">
                        <input type="radio" id="{{item.idStatus1}}" value="{{item.value1}}" ng-model="model[item.status]">
                        <label for="{{item.forStatus1}}"> Y </label>
                    </div>
                    <div class="radio radio-inline">
                        <input type="radio" id="{{item.idStatus2}}" value="{{item.value2}}" ng-model="model[item.status]">
                        <label for="{{item.forStatus2}}"> N </label>
                    </div>
                </td>
                <td class="radio-td">
                    <div class="radio radio-info radio-inline">
                        <input type="radio" id="{{item.idPriceList1}}" value="{{item.value1}}" ng-model="model[item.priceList]">
                        <label for="{{item.forPriceList1}}"> Y </label>
                    </div>
                    <div class="radio radio-inline">
                        <input type="radio" id="{{item.idPriceList2}}" value="{{item.value2}}" ng-model="model[item.priceList]">
                        <label for="{{item.forPriceList2}}"> N </label>
                    </div>
                </td>
                <td class="radio-td">
                    <div class="radio radio-info radio-inline">
                        <input type="radio" id="{{item.idInvSheet1}}" value="{{item.value1}}" ng-model="model[item.invSheet]">
                        <label for="{{item.forInvSheet1}}"> Y </label>
                    </div>
                    <div class="radio radio-inline">
                        <input type="radio" id="{{item.idInvSheet2}}" value="{{item.value2}}" ng-model="model[item.invSheet]">
                        <label for="{{forInvSheet2}}"> N </label>
                    </div>
                </td>
            </tr>
        </tbody>

我需要对复选框执行相同的操作。 这行不通。

 <tbody>
            <tr>
                <td style="border-top:none" nowrap align="center" ng-repeat="checkbox in section.sectionFutureCheckboxes">
                    <div class="checkbox checkbox-primary">
                        <input id="{{checkbox.id}}" type="checkbox" ng-model="model[checkbox.model]">
                        <label for="{{checkbox.for}}"><b>{{checkbox.label}}</b></label>
                    </div>
                </td>
            </tr>
        </tbody>

所以问题是我该怎么做？ 所以我在创建数组后将其展平还是更改了在服务中创建复选框数组的方式？

与HTML不同的plunker与html包含新的plunker

        <div class="hpanel" ng-repeat="section in formB6VM.sections">
                <div class="panel-body">
                    <div class="row">
                        <div class="col-xs-12">
                            <ul class="list-inline">
                                <li><h5><b>SecID</b></h5><span>{{section.section_name}}</span></li>
                                <li><h5><b>Section Name</b></h5><span>{{section.section_id}}</span></li>
                                <li><h5><b>Active</b></h5><span>{{section.date_active}}</span></li>
                            </ul>
                        </div>
                    </div>
                    <div class="row">
                        <div ng-include="'modules/survey-input/fb6/views/includes/fb6_input_table.html'"></div>
                    </div>
                    <div class="row">
                        <div ng-include="'modules/survey-input/fb6/views/includes/fb6_builder_developer_table.html'"></div>
                        <div ng-include="'modules/survey-input/fb6/views/includes/fb6_future_table.html'"></div>
                    </div>
                </div>
            </div>

Answer 1

要回答有关如何将对象的嵌套属性移动到对象的“根”的原始问题。 下面将有你要找的效果：

object.checkboxes = object.sectionFutureCheckboxes[0].checkboxes; 
delete object.sectionFutureCheckboxes[0].checkboxes; 

但是，正如查理特弗（Charlietfl）所暗示的那样，从客观的角度来看，这一点没有多大意义，可以说一只手六只，另一只手六只

弄清问题之后，您真正需要做的就是纠正HTM1尝试访问嵌套对象的方式。 具体来说，在future_table.html中，您具有：

<div class="col-sm-12 col-md-12 col-lg-6">
    <div class="table-responsive">
        <table class="table table-condensed">
            <tbody>
                <tr>
                    <td style="border-top:none" nowrap align="center" ng-repeat="checkbox in section.sectionFutureCheckboxes">
                        <div class="checkbox checkbox-primary">
                            <input id="{{checkbox.id}}" type="checkbox" ng-model="model[checkbox.model]">
                            <label for="{{checkbox.for}}"><b>{{checkbox.label}}</b></label>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <h5 class="future-table-h5"><b><i>*** Future Status - **Concept lots are not calculated in total</i></b></h5>
    </div>
</div>

但是， section.sectionFutureCheckboxes是一个数组，因此您需要首先通过将<tr ng-repeat="checkboxGroup in section.sectionFutureCheckboxes"> <tr>更改为<tr ng-repeat="checkboxGroup in section.sectionFutureCheckboxes">进行迭代，然后在其中更新<td ... ng-repeat="checkbox in section.sectionFutureCheckboxes">到<td ... ng-repeat="checkbox in checkboxGroup.checkboxes">

像这样：

<div class="col-sm-12 col-md-12 col-lg-6">
    <div class="table-responsive">
        <table class="table table-condensed">
            <tbody>
                <tr ng-repeat="checkboxGroup in section.sectionFutureCheckboxes">
                    <td style="border-top:none" nowrap align="center" ng-repeat="checkbox in checkboxGroup.checkboxes">
                        <div class="checkbox checkbox-primary">
                            <input id="{{checkbox.id}}" type="checkbox" ng-model="model[checkbox.model]">
                            <label for="{{checkbox.for}}"><b>{{checkbox.label}}</b></label>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <h5 class="future-table-h5"><b><i>*** Future Status - **Concept lots are not calculated in total</i></b></h5>
    </div>
</div>

这是更新的柱塞

现在，如果您打算只存在一行复选框，则需要通过创建数组的方式追溯到这一行，并找出不正确的构建位置，但是只有您知道这一点。