Dynamic multi-column checkboxes with AngularJS and Bootstrap

Question

I need the ability to display a list of checkboxes in multiply columns and have not been able to figure out a why to make it work. I am using AngularJS and Bootstrap. This is what I have working right now but the checkboxes are in one column.

<div class="row">
    <label class="col-md-2">Tests Ordered:</label>
    <div class="col-md-2">
        <label ng-repeat="test in tests">
            <input type="checkbox" checklist-model="user.tests" checklist-value="test">&nbsp;{{test.name}}
        </label>
    </div>
</div>

In my controller this is the checkbox names -

$scope.tests = [{ name: "CardioIDgenetix 901", id: 0 }, { name: "NeuroIDgenetix 902", id: 1 }, { name: "Thrombophilia 403", id: 3 }];

SRSonnenwald · Accepted Answer · 2015-06-03 17:33:20Z

1

Here is the basic concept to get you going:

<ul ng-repeat="column in columns" class="small-12 medium-4 columns">
  <li ng-repeat="skill in skills | slice:column.start:column.end">
    {{ skill }}
  </li>
</ul>

answered Jun 3, 2015 at 17:33

SRSonnenwald

3013 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

james Over a year ago

For anyone wanting more info, this snippet is taken from this full example here in another SO answer

Collectives™ on Stack Overflow

Dynamic multi-column checkboxes with AngularJS and Bootstrap

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related