ps0604 ps0604 - 1 year ago 86
AngularJS Question

Change styles of specific column

I have the following declaration of a table with columns that are created dynamically:

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

In the example the
depends on the
variable and it changes all the td classes in the first row. But I also need to change the td classes in a specific column. Is there a way to achieve this?

Answer Source

Hope this helps just add below condition in your ng-class

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

var app = angular.module('plunker', []);
  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=""></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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download