javascript - 以 Angular 动态创建两列复选框列表

Question

我有一个使用 angular.js 的应用程序，我对它还很陌生。我有一个复选框列表，这些复选框是根据先前的选择动态创建的。

例如，如果我有一个 Fruits 下拉列表，将创建以下 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 中用内联 block 显示每个元素，宽度约为 48%。

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

48% 的宽度将为其提供 2 列。如果您想要 3 列，则只需使用 30% 左右的宽度。 这也会在调整浏览器窗口时使列保持对齐。