如何使用 AngularJS 将类动态地应用于 div

Question

我想切换到带有class="col-md-x"的div，具体取决于我接收的学生对象的数量。E.x：示例

1. 如果我只得到一个 JSON 对象，那么我想让一个带有类的div 应该是这样的（class="col-md-12"）。

2. 如果我得到两个 JSON 对象，那么我想切换到带有 class="col-md-6" 的div。

<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

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

有关 ng 类的更多文档

代码片段：

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