変更スタイル

Question

私は動的に作成された列を持つテーブルの次の宣言を持っている：

<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クラスも変更する必要があります。これを達成する方法はありますか？

Answer 1

希望これはちょうど私が4行（インデックス3）2列（インデックス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="angularjs@1.5.8" 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>