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％的宽度。这也将在调整浏览器窗口时保持列对齐。

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;

});

然后在视图中，您可以按列号过滤每个转发器：

<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>

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

3 个答案: