Question

我想垂直显示除第一个之外的所有标题文本。我的表是使用ng-repeat动态创建的。我尝试使用ng-class

<th class="scenarioTableHeader alignVerticalText" ng-repeat="column in cols"><div class="verticalTextScenario" ng-class="{'scenarioBranchHeader':$first}">{{column}}</div></th>

但是默认类（verticalTextScenario）会覆盖ng-class中的css（scenarioBranchHeader）......

我在jsfiddle中附上了一个例子。感谢任何帮助。https://jsfiddle.net/oeq53xLe/14/

Answer 1

你可以用这个替换你的div：

<div ng-class="{'scenarioBranchHeader':$first,'verticalTextScenario':!$first}">{{column}}</div>

更新了jsFiddle

Answer 2

只需将 scenarioBranchHeader 类更改为

即可

.scenarioBranchHeader{
    text-align: center; 
    width:250px;
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
}

它应该做的工作。我添加了一个新的小提琴here。看看吧。

Answer 3

从CSS选择器中排除第一个孩子：https://jsfiddle.net/oeq53xLe/15/

th:not(:first-child) .verticalTextScenario {
    ...
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);

}

注意：不要忘记添加无前缀属性!!对于isntance，Internet Explorer将无法使用您的代码。将transform: rotate(-90deg)添加到底部的列表。

Answer 4

从div中删除class属性，并通过ng-class实现，就像if else语句一样。

 <th class="scenarioTableHeader alignVerticalText" ng-repeat="column in cols">
         <div ng-class="{'scenarioBranchHeader':$first,'verticalTextScenario':!$first}">
    {{column}}
     </div>
</th>

有条件地将css应用于ng-repeat下的th和td

4 个答案: