My goal is to specify 4 different output layouts. In my HTML, I will define the number of columns to show, and then in JavaScript, execute the corresponding code based on the number of columns specified:
<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>
If there are 3 columns, this code should be executed:
<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>
In case of 2 columns, use this code:
<div class="col-md-6">
<h1>Content</h1>
</div>
<div class="col-md-6">
<h1>Content</h1>
</div>
For a single column, run the following code:
<div class="col-md-12">
<h1>Content</h1>
</div>
I am wondering if it's possible to achieve this using AngularJS.