ps0604 ps0604 - 24 days ago 9
AngularJS Question

Change styles of specific column

I have the following declaration of a table with columns that are 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 the example the
ng-class
depends on the
row
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

Hope this helps just add below condition in your 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>

Comments