angularjs - Change styles of specific column -
i have following declaration of table columns created dynamically:
<table> <tr ng-repeat="row in rows"> <td ng-class="{ 'tdhead' : $index == 0 }" ng-repeat="col in row.cols">{{col.val}}</td> </tr> </table>
in example ng-class
depends on row
variable , changes td classes in first row. need change td classes in specific column. there way achieve this?
hope helps add below condition in 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 $index"> <td ng-class="{ 'tdhead' : $index == 1 && $parent.$index == 3 }" ng-repeat="col in row.cols">{{col}}</td> </tr> </table>
Comments
Post a Comment