代码之家 › 专栏 › 技术社区 › Chaitanya

动态创建并排列复选框到列[关闭]

typescript angular html javascript

Chaitanya · 技术社区 · 6 年前

目前在下面的html代码,它是显示我以下的输出

以下是我的代码:

<label class="control-label text-success">Add Applications</label>
<div class="container border">
  <div class="row">
    <div class="col-sm anyClass">
      <div
        class="form-check form-check-inline text-nowrap col-md-3 pl-2"
        *ngFor="let name of applicationList; let srno = index"
        [attr.data-index]="srno"
      >
        <div *ngIf="srno == 1||srno == 4||srno == 7||srno == 10">
          <span class="ml-4"></span>
        </div>
        <div *ngIf="srno == 2||srno == 5||srno == 8||srno == 11">
          <span class="ml-5"></span>
        </div>
        <input type="checkbox" name="{{name}}" value="{{name}}" />
        <label class="pt-2 pl-1">{{name}}</label>
      </div>
    </div>
  </div>
</div>

我的ts是:

applicationList = [
  'Application 6',
  'Application 7',
  'Application 8',
  'Application 9',
  'Application 10',
  'Application 11',
  'Application 12',
];

在这里,我根据arraylist中的srno编号对边距值进行了硬编码。我希望这是动态计算的。请帮帮我,提前谢谢。

1 回复 | 直到 4 年前

Jacopo Sciampi 6 年前

您可以删除 hard code 用flex来解决这个问题。

css格式:

    .box {
        height: 300px;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }
    .box>* {
        flex: 1 1 80px;
    }

     <div class="box">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
        <div>Four</div>
        <div>Five</div>
        <div>Six</div>
        <div>Seven</div>
        <div>Eight</div>
        <div>Nine</div>
      </div>

有关flex wrap的更多信息: https://css-tricks.com/almanac/properties/f/flex-wrap/ 有关弯曲方向的详细信息: https://developer.mozilla.org/it/docs/Web/CSS/flex-direction

flex的完整简单指南: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

我意识到现在不是一个垂直的列表。下面是片段:

      .box {
        display: flex;
        flex-wrap: wrap;
    }
    .box>* {
        flex: 1 1 33%;
    }

      <div class="box">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
        <div>Four</div>
        <div>Five</div>
        <div>Six</div>
        <div>Seven</div>
        <div>Eight</div>
        <div>Nine</div>
      </div>