有條件地選擇與納克級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)">