面板主体中的文本未显示在行中

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 放在row元素中：

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