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

2015-01-23 09:10:07 +00:00
Commented Jan 23, 2015 at 9:10 — Ved
– Ved, Commented Jan 23, 2015 at 9:10

Community · Accepted Answer · 2017-05-23 12:33:29Z

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, 2017 at 12:33

CommunityBot

11 silver badge

answered Jan 23, 2015 at 9:12

Janaki Sathiyamurthy

5881 gold badge6 silver badges21 bronze badges

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

Comments

V31 · Accepted Answer · 2015-01-23 09:10:50Z

0

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>

answered Jan 23, 2015 at 9:10

V31

7,6643 gold badges28 silver badges44 bronze badges

Collectives™ on Stack Overflow

How to apply class to div dynamically using AngularJS

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related