如何使用 AngularJS 动态地将 class 应用到 div

Question

我想切换到 div 和 class="col-md-x"，具体取决于我收到的学生对象的数量。 E.x: Sample

如果我只得到一个 JSON 对象，那么我想要一个 div 和 class 应该像（class="col-md-12").
如果我得到两个 JSON 对象，那么我想切换到 div 和 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

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

分配 classes

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

Answer 2

像下面那样使用 ng-class，

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

供您参考，Detailed explanation

如何使用 AngularJS 动态地将 class 应用到 div

How to apply class to div dynamically using AngularJS

html

angularjs

twitter-bootstrap

ng-switch