Text im Panel-Text wird nicht in Zeilen angezeigt

Question

Was im Skript im Panel-Text erforderlich ist, wird in Zeilen für alle Daten in ng-repeat angezeigt. Auf der linken Seite ist data.name und rechts das Symbol. Wenn der aktuelle Codedatenwert nicht in separaten Zeilen angezeigt wird, ist er unordentlich.

<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> 

Hier ist screnshot, wie es aussieht.

Wie Sie für die Lage, dass zwei Kontrollkästchen sehen Ich brauche nacheinander in getrennten Reihen sein. Auch in Programm muss ich in getrennten Reihen sein und in jeder Reihe dieses Symbol, um rechts zu sein.

UPDATE - CURRENT SOLUTION

<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

Es macht Sinn. Sie versuchen, für jede Spalte ein neues Ankreuzfeld anzulegen. Bootstrap versucht, den Platz für col-md-6 (2-Spalten-Layout) zu füllen.

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

Eine Lösung wäre, die ng-repeat in der Reihe Element zu setzen:

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