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

Question

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

我用

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

这使得一行，我希望它更智能地适应特定宽度并在元素数量超过时创建另一行

Answer 1

看起来您正在使用 Angular Material 设计..
您可以在这里看到下面的设计，我一行中有四个复选框，如果超过四个，它将转到下一行

<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