Question

在我的HTML页面中，我从数据库中检索布尔数据，我想在网格中显示它们，但它们总是看起来很难看

我用

<table>
  <tr>
    <td ng-repeat="tab in allTabs"><md-checkbox>{{tab.name}}</md-checkbox></td>
  </tr>
</table>

这会产生一行，我希望它更灵活，以适合特定的宽度，如果项目数超过

，则创建另一行

Answer 1

看起来你正在使用角度材料设计。
你可以在这里看到下面的设计我在一行中有四个复选框，如果有超过四个，它将转到下一行

<div layout="row" layout-wrap>
  <md-input-container class="md-block" flex-gt-sm="25" flex="45" content-layout-align="center start" ng-repeat="tab in allTabs">
    <md-checkbox ng-model="tab.value" aria-label="tab.key">
      {{tab.key}}
    </md-checkbox>
  </md-input-container>
</div>

   $scope.allTabs = [{
     key: 'Courier Docket',
     value: false
   }, {
     key: 'Completion Report',
     value: false
   }, {
     key: 'Images',
     value: false
   }, {
     key: 'Fourth One',
     value: false
   }];

修改

我正在为这个答案添加jsfiddle链接..

<强> JS-FIDDLE

Answer 2

在你的md复选框中使用ng-repeat这将允许你向td添加更多的css，你可以指定你的td的宽度，在这种情况下它将自动移动到下一行

  <table>
    <tr >
      <td style="width:100px"><md-checkbox ng-repeat="tab in allTabs">{{tab.name}}</md-checkbox></td>
    </tr>
  </table>

使用ng-repeat时如何在精确对齐的行中显示复选框？

2 个答案: