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

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 new plunker with html

        <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 所暗示的那样，从客观的角度来看，这并没有什么意义，可以说，一方面是六个，另一方面是六个

在您澄清问题后，您真正需要做的是纠正您的 HTMl 尝试访问嵌套对象的方式。具体来说，在 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> 更改为<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>

这是Updated Plunker

现在，如果您希望只有一行复选框，则需要通过创建数组的方式来跟踪它并找出错误构建的位置，但只有您自己知道。