Define Bootstrap columns with AngularJS

Question

I would like to define 4 different outputs. In my HTML I want to say how many columns I would like to show, then in JavaScript I would run this code if there are 4 columns:

<div class="col-md-3">
    <h1>Content</h1>
</div>
<div class="col-md-3">
    <h1>Content</h1>
</div>
<div class="col-md-3">
    <h1>Content</h1>
</div>
<div class="col-md-3">
    <h1>Content</h1>
</div>

Run this code if there are 3 columns:

<div class="col-md-4">
    <h1>Content</h1>
</div>
<div class="col-md-4">
    <h1>Content</h1>
</div>
<div class="col-md-4">
    <h1>Content</h1>
</div>

Run this code if there 2 columns:

<div class="col-md-6">
    <h1>Content</h1>
</div>
<div class="col-md-6">
    <h1>Content</h1>
</div>

Run this code if there is 1 column:

<div class="col-md-12">
    <h1>Content</h1>
</div>

Is there a way doing this with AngularJS?

Can simply do it on the template side and use ng-if with something like ng-if="colCount == 2" and so on. — GillesC
– GillesC, Commented May 27, 2016 at 11:16
How are you deciding the number of columns? Dont know angular but run a loop and set the col-md- class to 12/no of columns — Craicerjack
– Craicerjack, Commented May 27, 2016 at 11:27

ahmetugurbulut · Accepted Answer · 2016-05-27 12:12:14Z

3

Can you try this:

NG:

$scope.number = 4;//your column count 
$scope.getNumber = function(num) {
    return new Array(num);   
}

Html:

<div ng-repeat="i in getNumber(number) track by $index" class="col-sm-{{12/number}}">
     <h1>Content</h1>
</div>

http://jsfiddle.net/3ck8vb1s/1/

answered May 27, 2016 at 12:12

ahmetugurbulut

1,60911 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

Define Bootstrap columns with AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related