以角度动态创建两列复选框列表

Question

我有一个使用angular.js的应用程序,我对它很新.我有一个复选框列表,可以根据之前的选择动态创建.

例如,如果我有一个水果下拉列表,将创建以下html:

<input type='checkbox' value="apple">apple</input>
<input type='checkbox' value="banana">banana</input>
<input type='checkbox' value="mango">mango</input>
<input type='checkbox' value="orange">orange</input>
<input type='checkbox' value="pear">pear</input>
<input type='checkbox' value="watermelon">water</input>

但是,有时生成的复选框数量超过20项,我想使用一些未使用的空间.

所以我想知道是否可以将一个复选框列表分成两列而不是一列,这样一个新列将生成填充剩下的复选框？

例如:如果我有18个项目,而不是包含18个复选框的单个列的一个大列表,则最终结果将在列上有10个复选框,在其旁边的另一列中有8个复选框.我想只有2列作为最大值.这可能吗？

这是我到目前为止所做的,我不确定这是否是最佳方式.否则我只会回答这个问题并将其标记为这样.我想,分割数据的逻辑将在代码隐藏中完成.

示例:http://jsfiddle.net/7843b/

视觉表现

  X  Apple         X  Pears
  X  Banana        X  Watermelon
  X  Mango
  X  Orange

X代表一个复选框.

Answer 1

似乎这些解决方案比需要的要复杂一些.让css处理将它们放入列中:

使用Javascript:

$scope things = ["car", "box", "plant", "dice", "knife", "calendar"];

HTML:

<div  class="checkbox-column" ng-repeat='thing in things'>
    <input type="checkbox" /><span>{{thing}}</span>
</div>

在css中显示每个元素的内嵌块和宽度约为48%.

.checkbox-column{
    display: inline-block;
    width:48%; 
}

48%的宽度将给它2列.如果你想要3列,那么只需使用30%的宽度.这也将在调整浏览器窗口时保持列对齐.