有条件地选择与纳克级angulrjs

Question

我在一个阵列中的两个类的类如下

$scope.userClasses = ["user-dashboard-dark", "user-dashboard-light"]; 

而我的HTML代码

<div class="row"> 
    <div ng-click="userClick(user)" class="col-lg-3 col-md-3 col-sm-4 col-xs-12" ng-repeat="user in usersList" style="cursor:pointer;"> 
     <div class="panel widget" ng-class="userClasses"> 
      <div class="panel-body"> 
       <div class="row row-table"> 
        <div class="col-xs-4 text-center"> 
         <img src="{{user.image || 'app/img/user/avatar03.png'}}" alt="Image" class="img-thumbnail img-circle img-responsive thumb64" /> 
        </div> 
        <div class="col-xs-8 text-center"> 
         <h4 class="m0">{{user.userName}}</h4> 
         <em class="fa fa-envelope fa-fw"></em> 
         <span><small>{{user.email}}</small></span> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

我想用第一类（用户仪表板的黑暗），第一次和我想用第二类，其余（用户仪表盘灯）

Answer 1

可以试试这个：

<div ng-class="userClasses[0]"> {{user.userName}} </div> 

<div ng-class="userClasses[1]"> {{user.email}} </div> 

Answer 2

在ng-repeat中使用变量$ first。如果重复元素在迭代器中第一个，则$ first为真。 的HTML代码如下所示：

<div class="row"> 
    <div ng-click="userClick(user)" class="col-lg-3 col-md-3 col-sm-4 col-xs-12" ng-repeat="user in usersList" style="cursor:pointer;"> 
     <div class="panel widget" ng-class="{'user-dashboard-dark' :$first, 'user-dashboard-light': !$first }"> 
     <div class="panel-body"> 
      <div class="row row-table"> 
       <div class="col-xs-4 text-center"> 
        <img src="{{user.image || 'app/img/user/avatar03.png'}}" alt="Image" class="img-thumbnail img-circle img-responsive thumb64" /> 
       </div> 
       <div class="col-xs-8 text-center"> 
        <h4 class="m0">{{user.userName}}</h4> 
        <em class="fa fa-envelope fa-fw"></em> 
        <span><small>{{user.email}}</small></span> 
       </div> 
      </div> 
     </div> 
     </div> 
    </div> 
</div> 

如果您坚持从阵列应用类然后定义在控制器的功能，根据$首先返回正确的类：

$scope.isFirstRow = function(first){ 
    return (first ? $scope.userClasses[0] : $scope.userClasses[1]); 
    } 

和在您的html中：

<div class="panel widget" ng-class="isFirstRow($first)">