Bootstrap 在 3 列中显示动态复选框 [英] Bootstrap to display dynamic checkboxes in 3 columns

查看：34
本文介绍了Bootstrap 在 3 列中显示动态复选框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在我的 Angular 4 应用程序中使用 Bootstrap 3 创建一个表单.在表单中，我需要根据从 Web 服务调用返回的数据呈现复选框.因此，我需要遍历数据并为收到的每个值呈现一个复选框.

这些复选框的显示有点混乱，如下面的屏幕截图所示 -

有没有办法在 3 列中显示这些复选框.像这样的东西(看起来更干净)

我目前的代码如下

<div class="row"><div class="col-xs-12"><form [formGroup]="myForm"><div class="row">...
<div class="row">...

<div class="row"><div class="col-xs-8"><div class="form-group"><label for="options" class="col-xs-4">选项</label><div class="checkbox" formGroupName="options" *ngFor="let option of options"><div class="col-xs-4"><input id="{{option}}" formControlName="{{option}}" type="checkbox"[检查]=假>{{选项}}

<div class="col-xs-4"><div class="form-group"><label for="name" class="col-xs-4">Name</label><div class="col-xs-8"><input type="text" id="name" formControlName="name" class="form-control input-sm">

<div class="row">...

</表单>

我遇到过其他一些关于堆栈溢出的线程，其中包含带有静态复选框的示例(Twitter Bootstrap - 表单中的复选框列/列).但我不知道如何将它应用于动态生成的复选框.

解决方案

您可以使用 linq-es2015 库这样:

import { asEnumerable } from 'linq-es2015';//组件中的某处var 组 = asEnumerable(this.options).Select((option, index) => { return { option, index }; }).通过...分组(x =>Math.floor(x.index/3),x =>x.选项，(键，选项)=>asEnumerable(options).ToArray()).ToArray();//模板片段<div class="col-xs-8"><div class="row"><div class="col-xs-4"><label for="options" class="col-xs-4">选项</label>
<div class="col-xs-8"><div class="row" *ngFor="let group of groups"><div class="col-xs-4" *ngFor="let option of group"><input id="{{option}}" formControlName="{{option}}" type="checkbox" [checked]=false/>{{选项}}

I am using Bootstrap 3 in my Angular 4 app to create a form. In the form, I need to render checkboxes on the basis of data returned from a web service call. So, I need to iterate over the data and render a checkbox for every value received.

The display for these checkboxes is bit messed up as in the screenshot below -

Is there a way to display these checkboxes in 3 columns. Something like this (looks much cleaner)

My current code is as below

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <form [formGroup]="myForm">

        <div class="row">
          ...
        </div>
        <div class="row">
          ...
        </div>
        <div class="row">
          <div class="col-xs-8">
            <div class="form-group">
              <label for="options" class="col-xs-4">Options</label>
              <div class="checkbox"  formGroupName="options" *ngFor="let option of options">
               <div class="col-xs-4">
                <input id="{{option}}" formControlName="{{option}}" type="checkbox" 
                         [checked]=false> {{option}}
               </div>
              </div>
            </div>
          </div>
          <div class="col-xs-4">
            <div class="form-group">
              <label for="name" class="col-xs-4">Name</label>
              <div class="col-xs-8">
                <input type="text" id="name" formControlName="name" class="form-control input-sm">
              </div>
            </div>
          </div>
        </div>
        <div class="row">
        ...
        </div>
      </form>
    </div>
  </div>
</div>

I have come across some other threads on stack overflow that have examples with static checkboxes (Twitter Bootstrap - checkbox columns / columns within form). But I am not able to make out how to apply it to dynamically generated checkboxes.

解决方案

You can use linq-es2015 library this way:

import { asEnumerable } from 'linq-es2015';

//somewhere in component
var groups = asEnumerable(this.options)
    .Select((option, index) => { return { option, index }; })
    .GroupBy(
              x => Math.floor(x.index / 3),
              x => x.option,
              (key, options) => asEnumerable(options).ToArray()
            )
    .ToArray();

//template's fragment
<div class="col-xs-8">
  <div class="row">
    <div class="col-xs-4">
        <label for="options" class="col-xs-4">Options</label>
    </div>            
    <div class="col-xs-8">
      <div class="row" *ngFor="let group of groups">
        <div class="col-xs-4" *ngFor="let option of group">
          <input id="{{option}}" formControlName="{{option}}" type="checkbox" [checked]=false/> {{option}}
        </div>      
      </div>              
    </div>            
  </div>
</div>

这篇关于Bootstrap 在 3 列中显示动态复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆