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

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 中显示每个元素，其中包含一个 inline-block 和大约 48% 的宽度。

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

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

Answer 2

另一种方法是在 $scope.teams 中为每个团队添加列号。

http://jsfiddle.net/dkitchen/y5UzD/4/

这会将它们分成 10 个一组...

function TeamListController($scope) {

$scope.teams = [
    { name: "apple", id: 0, isChecked: true, col:1 }, 
    { name: "banana", id: 1, isChecked: false, col:1 }, 
    { name: "mango", id: 2, isChecked: true, col:1 },
    { name: "orange", id: 3, isChecked: true, col:1 }, 
    { name: "pear", id: 4, isChecked: false, col:1 }, 
    { name: "john", id: 5, isChecked: true, col:1 },
    { name: "paul", id: 6, isChecked: false, col:1 },
    { name: "george", id: 7, isChecked: true, col:1 },
    { name: "ringo", id: 8, isChecked: true, col:1 },
    { name: "roger", id: 9, isChecked: false, col:1 },
    { name: "dave", id: 10, isChecked: true, col:2 },
    { name: "nick", id: 11, isChecked: false, col:2 }
    ];
}   

您可以在数据源中执行此操作，也可以稍后在控制器中分配列号。

例如，此位将它们重新分组为每列 8 个项目：

var colCounter = 1;
var colLimit = 8;
angular.forEach($scope.teams, function(team){        

    if((team.id + 1) % (colLimit + 1) == 0) {
        colCounter++;
    }
    team.col = colCounter;

});

然后在视图中，可以按列号过滤每个repeater：

<div ng-app>
<div ng-controller="TeamListController">
    <div class="checkboxList">
        <div id="teamCheckboxList">
            <div ng-repeat="team in teams | filter: { col: 1 }">
                <label>
                    <input type="checkbox" ng-model="team.isChecked" /> <span>{{team.name }}</span>

                </label>
            </div>
        </div>
    </div>
    <div>
        <div id="teamCheckboxList1">
            <div ng-repeat="team in teams | filter: { col: 2 }">
                <label>
                    <input type="checkbox" ng-model="team.isChecked" /> <span>{{team.name}}</span>
                </label>
            </div>
        </div>
    </div>

    </div>

Answer 3

这个问题一点也不奇怪。您可以在 js 中动态添加项目，也可以在 html 本身中执行相同操作。我这里提的是如何根据项目的数量动态拆分。

function TeamListCtrl($scope) {
    $scope.teams = [
        { name: "apple", id: 0, isChecked: true }, 
        { name: "banana", id: 1, isChecked: false }, 
        { name: "mango", id: 2, isChecked: true },
        { name: "orange", id: 3, isChecked: true },
        { name: "pear", id: 4, isChecked: false }, 
        { name: "watermelon", id: 5, isChecked: true }
    ];

    column1 = [];
    column2 = [];
    $.each($scope.teams, function(index){
        console.log("index"+index);
        if(index%2==0) {
            column1.push($scope.teams[index]);
        } else{
            column2.push($scope.teams[index]);
        }
    });
    $scope.columns.push(column1);
    $scope.columns.push(column2);
}

你可以修改你的html代码为：

<div ng-app>
    <div ng-controller="TeamListCtrl" class="checkboxList">
        <div id="teamCheckboxList">
            <div ng-repeat='column in columns'>
                <div class='someClassToArrangeDivsSideBySide' ng-repeat="team in column">
                    <label>
                        <input type="checkbox" ng-model="team.isChecked" /> <span>{{team.name}}</span>
                    </label>
                </div>
            </div>
        </div>
    </div>
</div>