2016-11-08 55 views
0

我有一個動態創建一個表的列如下聲明:更改樣式特定列的

<table> 
    <tr ng-repeat="row in rows"> 
     <td ng-class="{ 'tdhead' : $index == 0 }" 
        ng-repeat="col in row.cols">{{col.val}}</td>  
    </tr> 
</table> 

ng-class依賴於row變量的例子,它改變了第一的所有TD類行。但我也需要改變特定列中的td類。有沒有辦法做到這一點?

回答

1

希望這有助於只是在你的ng-class

ng-class="{ 'tdhead' : $index == 0 && $parent.$index == 1 }" 

var app = angular.module('plunker', []); 
 
app.controller('MainCtrl', 
 
    function MainCtrl($scope) { 
 

 

 

 
    $scope.rows = [{ 
 
     name: "abc1", 
 
     empid: 10215, 
 
     cols: ["heading1", "heading2", "heading3"] 
 
    }, { 
 
     name: "abc2", 
 
     empid: 10216, 
 
     cols: ["heading1", "heading2", "heading3"] 
 
    }, { 
 
     name: "abc3", 
 
     empid: 10217, 
 
     cols: ["heading1", "heading2", "heading3"] 
 
    }, { 
 
     name: "abc4", 
 
     empid: 10218, 
 
     cols: ["heading1", "heading2", "heading3"] 
 
    }, { 
 
     name: "abc5", 
 
     empid: 10219, 
 
     cols: ["heading1", "heading2", "heading3"] 
 
    }]; 
 

 

 

 

 
    } 
 
);
.tdhead { 
 
    background-color: red; 
 
}
<script data-require="[email protected]" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script> 
 
<table ng-app="plunker" ng-controller="MainCtrl"> 
 
    <tr ng-repeat="row in rows track by $index"> 
 
    <td ng-class="{ 'tdhead' : $index == 1 && $parent.$index == 3 }" ng-repeat="col in row.cols">{{col}}</td> 
 
    </tr> 
 
</table>

+0

添加以下條件在我用4行(指數3)2列(索引1)您可以將代碼段甚至使這個值變動 –