面板正文中的文本沒有顯示在行

面板正文中的腳本需要在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>

這裏是它如何尋找的screnshot。

正如你可以看到這兩個複選框我需要的是一個又一個不同的行位置。此外，在計劃中，我需要在單獨的行中，並在每一行圖標在右側。

更新 - 當前的解決方案

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

來源

2016-11-24 Bukic

你的風格是至關重要的，因此要確認你的'.row'已經無浮分配，是'display：block'，還加上'overflow：hidden'，這將強制清除。沒有發佈相關的CSS，你無法得到準確的答案。 – skobaljic

這是有道理的。您嘗試爲每一列創建一個新的複選框。 Bootstrap嘗試填充col-md-6（2列布局）的空間。

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

一個解決辦法是把NG重複在行元素：

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

來源

2016-11-24 12:35:06

感謝您的回答，稍後再嘗試。現在我通過添加一個簡單的表格來解決這個問題。 – Bukic

面板正文中的文本沒有顯示在行

回答

相關問題