dynamically create two column checkbox list in angular

Question

I have an application that is using angular.js and I'm very new to it. I have a list of checkboxes that gets dynamically created based on a previous selection.

For example, if I have a dropdown of Fruits, the following html will get created:

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

However, sometimes the amount of checkboxes that get generated gets more than 20 items, and I want to make use of some unused space.

So I was wondering if it's possible to split a list of checkboxes into two columns instead of one, so that a new column will generate filling up the rest of the checkboxes?

For example: If I have 18 items, instead of one large list of a single column containing 18 checkboxes, the final result will be to have 10 checkboxes in on column, and 8 checkboxes in another column next to it. I want to only have 2 columns as the maximum. Is this possible?

Here is what I have so far, I'm not sure if this is the best way of doing it. Otherwise I'll just make an answer for this question and mark it as such. Logic for splitting the data will be done in code-behind I guess.

example: http://jsfiddle.net/7843b/

Visual representation

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

The X represents a checkbox.

Answer 1

Seems like these solutions are a bit more complicated than needs to be. Let css handle putting them into columns:

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>

in the css display each element with an inline-block and a width around 48%.

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

The width of 48% will give it 2 columns. If you want 3 columns, then just use a width of like 30%. This will also keep the columns aligned when the browser window is adjusted.

Answer 2

Another way is to add column number to each team in the $scope.teams.

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

This splits them into groups of 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 }
    ];
}   

You can do that at the data source, or you can assign the column number later in the controller.

For example, this bit re-groups them into 8 items per column:

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

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

});

Then in the view, you can filter each repeater by column number:

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