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

回答关于如何将对象的嵌套属性移动到＆＃34; root＆＃34;的原始问题。对象。下面会有你寻找的效果：

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

然而，正如charlietfl所暗示的那样，从客观的角度来看，这一点并没有太大的意义，另一方面可以说6个在另一方面可以说是半打的

在您澄清问题之后，您真正需要做的是更正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">更新为{ {1}}

像这样：

<td ... ng-repeat="checkbox in checkboxGroup.checkboxes">

这是Updated Plunker

现在，如果您打算只有一行复选框，那么您需要通过创建阵列的方式跟踪它，并找出错误构建的位置，但只有您知道这一点。

如何拼合嵌套的嵌套对象数组

1 个答案:

这是Updated Plunker