Question

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

如果我只获得一个JSON对象，那么我想要一个带类的div应该是（class =“col-md-12”）。
如果我得到两个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]"

供您参考，Detailed explanation

Answer 2

您在示例代码中有calss而不是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>

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

2 个答案: