javascript - 面板正文中的文本未按行显示

Question

面板正文中的脚本需要在 ng-repeat 中按行显示每个数据。左边是 data.name，右边是图标。当前代码数据没有显示在单独的行中，很乱。

<script type="text/ng-template" id="field_renderer.html">
                    <div  class="col-md-6" ng-repeat-start="data in data.children">
                        <div class="row">
                        <label>
                            <input type="checkbox" value="{{data.name}}" ng-model="data.isSelected">
                            {{data.name}}
                        </label>
                        <span ng-if="data.children.length > 0">
                            <i class="pull-right glyphicon" data-ng-click="data.showDetails = !data.showDetails"
                               ng-class="{'pull-right glyphicon glyphicon-plus': !data.showDetails, 'pull-right glyphicon glyphicon-minus': data.showDetails}"></i>
                        </span>
                        </div>
                    </div>
                    <div ng-repeat-end ng-if="data.showDetails" ng-include="'field_renderer.html'"></div>
                </script>
                <div class="panel-group">
                    <div ng-repeat-start="data in reportsvm.filters" class="panel panel-default">
                        <div class="panel-heading clickable" data-ng-click="reportsvm.showDetails(data)">
                            <h4 class="panel-title">
                                <a href="">{{data.name}}</a>
                                <i ng-class="{'pull-right glyphicon glyphicon-plus': !data.showDetails, 'pull-right glyphicon glyphicon-minus': data.showDetails}"></i>
                            </h4>
                        </div>
                    </div>
                    <div class="panel-body small" ng-if="data.showDetails" ng-repeat-end ng-include="'field_renderer.html'"></div>
                </div>

这是它的外观截图。

正如您所看到的位置，我需要在不同的行中一个接一个地放置两个复选框。同样在程序中，我需要在不同的行中，并且在每一行中该图标都在右边。

更新 - 当前解决方案

 <table class="table">
                            <tbody>
                            <tr ng-if="data.name === 'Location'">
                                <td class="noBorder" colspan="2">
                                    <button data-ng-click="reportsvm.changeLocation(data, true)" data-ng-class="" class="btn btn-default btn-sm">
                                        Regions</button>
                                    <button data-ng-click="reportsvm.changeLocation(data, false)" data-ng-class="" class="btn btn-default btn-sm pull-right">
                                        State/Territory</button>
                                </td>
                            </tr>
                            <tr ng-repeat-start="data in data.children">
                                <td class="noBorder">
                                    <label>
                                        <input type="checkbox" value="{{data.name}}" ng-change="reportsvm.changeValue(data)" ng-model="data.isSelected">
                                        {{data.name}}
                                    </label>
                                </td>
                                <td class="noBorder">
                                    <span ng-if="data.children.length > 0">
                                        <i class="pull-right glyphicon" data-ng-click="data.showDetails = !data.showDetails"
                                           ng-class="{'pull-right glyphicon glyphicon-plus': !data.showDetails, 'pull-right glyphicon glyphicon-minus': data.showDetails}"></i>
                                    </span>
                                </td>
                            </tr>
                            <tr ng-repeat-end ng-if="data.showDetails">
                                <td class="noBorder" ng-include="'field_renderer.html'"></td>
                            </tr>
                            </tbody>
                        </table>

Answer 1

这是有道理的。您尝试为每一列创建一个新的复选框。Bootstrap 尝试填充 col-md-6(2 列布局)的空间。

 <div  class="col-md-6" ng-repeat-start="data in data.children">

一个解决方案是将 ng-repeat 放在行元素中:

<div  class="col-md-6">
   <div class="row" ng-repeat-start="data in children>
     <!--rest of the code ....-->
    </div>
</div>