How to apply class to div dynamically using AngularJS

Question

I want to switch to div with class="col-md-x" depending upon the number of student object i am receiving. E.x: Sample

if i am getting only one JSON object then i want to a div with class should be like(class="col-md-12").
if am getting two JSON object then i want to switch to a div with class="col-md-6".

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div clss="row">
                <div ng-repeat="c in vm.students" class="col-md-12">
                    <div calss="thimbnail">
                        <div class="Option div 1">
                        </div>
                    </div>
                </div>
                <div ng-repeat="c in vm.students" class="col-md-6">
                    <div calss="thimbnail col-md-">
                        <div class="Option div 2">
                        </div>
                    </div>
                </div>
                 <div ng-repeat="c in vm.students" class="col-md-4">
                    <div calss="thimbnail col-md-">
                        <div class="Option div 3">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

use ng-class and put condition inside that.. – Ved Jan 23 '15 at 09:10 — Ved, Jan 23 '15 at 09:10

score 2 · Accepted Answer · edited May 23 '17 at 12:33

2

Use ng-class like below,

ng-class="{class}[condition]"
In your case , 
ng-class="{1:'col-md-12', 2:'col-sm-6'}[vm.students.length]"

For your reference, Detailed explanation

edited May 23 '17 at 12:33

Community

1
1

answered Jan 23 '15 at 09:12

Janaki Sathiyamurthy

578
1
5
21

score 0 · Answer 2 · answered Jan 23 '15 at 09:10

You have calss instead of class in the example code. I hope that is a typo. To address to your problem you can make use of ng-class where you can assign classes based on conditions

More document on ng-class

Code Snippet:

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div clss="row">
                <div ng-repeat="c in vm.students" ng-class="{col-md-12:vm.students.length === 1,col-md-6:vm.students.length === 2">
                    <div calss="thimbnail">
                        <div class="Option div 1">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

How to apply class to div dynamically using AngularJS

2 Answers2