html - 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

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

2. 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>

Answer 1

使用 ng-class 如下所示，

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

供大家参考，详解

Answer 2

您在示例代码中有 cals 而不是 class。我希望这是一个错字。为了解决您的问题，您可以使用 ng-class ，您可以在其中根据条件分配类

更多关于ng-class 的文档

代码片段：

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