Создать столбцы флажков динамически угловые

Question

Я пытаюсь динамически создавать столбцы флажков в выпадающем меню с использованием углового. Я использую загрузку. У каждого элемента флажка могут быть или не быть связанные с детьми.

Решение, которое я нашел в том, чтобы поместить все внутри DIV (.col -sm -4, система сетки загрузчика, но детали не были выровнены

Следуйте код, и результат этого действия.: (поставить линию в красный цвет для легкой ориентации)

<li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="font-size:14px; padding: 16px 15px">Tipo peca <span class="caret"></span></a> 
      <ul class="dropdown-menu" style="border:1px solid #dcdcdc;border-radius: 3px; width:1000px;"> 
       <li ng-repeat="result in vm.listAnuncios.anunciosAgrupadosPorTipoPeca"> 
        <div class="col-sm-4" style="border:1px solid red;"> 
         <input type="checkbox" ng-click="vm.selectAll($event)" /> 
         <span class="lbl padding-8" style="color:#8b8b8b; font-size:12px !important"> 
          {{result.nome}} 
          <span style="color:#b0b0b0;">{{result.total}}</span> 
         </span> 

         <ul id="tp_{{result.subTipoPecaId}}"> 
          <li ng-repeat="peca in result.pecasAgrupadas" style="margin-left:25px;"> 

           <input type="checkbox" ng-click="vm.selectAll($event)" /> 
           <span class="lbl padding-8" style="color:rgba(139, 139, 139, 0.88); font-size:12px !important"> 
            {{peca.nome}} 
            <span style="color:#b0b0b0;">{{peca.total}}</span> 
           </span> 

          </li> 
         </ul> 

        </div> 

       </li> 

      </ul> 
     </li> 

(Игнорируйте португальцев в коде.)

Результат:

enter image description here

Answer 1

Попробуйте использовать следующий пример кода. Если вам нужно какое-либо изменение в требовании, дайте мне полный код, включая данные.

FIDDLE

<div ng-app> 
    <div ng-controller="TeamListCtrl" class="checkboxList"> 
    <div id="teamCheckboxList"> 
     <li ng-repeat="result in results"> 
     <div class="col-sm-4" style="border:1px solid red;"> 
      <input type="checkbox" ng-click="vm.selectAll($event)" /> 
      <span class="lbl padding-8" style="color:#8b8b8b; font-size:12px !important"> 
          {{result.name}} 
          <span style="color:#b0b0b0;">{{result.total}}</span> 
      </span> 

      <ul id="tp_{{result.subTipoPecaId}}"> 
      <li ng-repeat="peca in pecas" style="margin-left:25px;"> 

       <input type="checkbox" ng-click="vm.selectAll($event)" /> 
       <span class="lbl padding-8" style="color:rgba(139, 139, 139, 0.88); font-size:12px !important"> 
            {{peca.name}} 
            <span style="color:#b0b0b0;">{{peca.total}}</span> 
       </span> 

      </li> 
      </ul> 

     </div> 

     </li> 
    </div> 
    </div> 
</div>