2016-11-08 5 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) вы можете даже сделать эти значения динамическими –

Смежные вопросы