Javascript 在angular中动态创建两列复选框列表

我有一个使用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>

---

X代表一个复选框。

这个问题一点也不奇怪。您可以在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>

{{team.name}

另一种方法是向$scope.teams中的每个团队添加列号

这将他们分成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>

{{team.name}
{{team.name}

---

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

Javascript:

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

html:

48%的宽度将提供两列。如果您想要3列，那么只需使用30%左右的宽度。

---

这也将在调整浏览器窗口时保持列对齐。

不确定为什么我被否决并被投票关闭，请不要粗暴，发表评论，我会说得更清楚。这是一个合理的问题。嘿，这比我预想的更符合逻辑。我试图创建一个JSFIDEL，但它不起作用。我想我可以试着用你的逻辑作为基础来解决这个问题。但有一件事，当我阅读代码时，似乎左侧窗格会出现奇怪的索引复选框，而右侧窗格会出现索引复选框。有什么方法可以让我得到一个有序的列表，只需先填充一侧，然后填充旁边的一侧？就像我有8个项目，而不是索引0、2、4、6进入一列。。1,3,5,7进入它旁边的一栏。。项目应该是，0、1、2、3、4将进入一列，5、6、7将填充第二列。我认为上面的示例混合了一些jquery语法，这可能就是为什么它在JSFIDLE中不起作用（除非启用jquery）。试试这个（不是jquery）：是的，您可以根据自己的需求转换代码。我刚才向你们展示了我们如何以简单的方式实现这一目标。如果您想在第一面有1到k个项目，在另一面有k+1到n个项目，那么您可以这样做：只需简单地添加If（indexHey，我非常喜欢这个解决方案，但我只是想知道，是什么规定了值来决定第2列中应该包含什么？在点击角度页面之前是否从服务器端进行配置？当然……或者如果希望数据源与列无关，此示例显示了稍后在控制器中添加的col属性：你必须喜欢动态对象。这不会让项目按字母顺序从上到下排列，但如果你想让项目按字母顺序从左到右排列，这就足够了。

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

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

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