html - 动态创建复选框列

Question

我正在尝试使用 angular 在下拉列表中动态创建复选框列。我使用 Bootstrap 。每个复选框元素可能有也可能没有相关的子项。

我找到的解决方案是将所有内容都放在一个 div 中( .col -sm -4 ，网格系统 Bootstrap ，但元素没有正确对齐。

按照代码和此操作的结果:(将线标记为红色以便于定位)

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