AngularJS 1 - 切换选项卡时CSS崩溃

Question

我的主页加载时如下：

最初，有些行是使用ng-class填充背景颜色（蓝色），这里是＆＃34; row-answer-call＆＃34;如下所示：

<tr ng-repeat="item in list" ng-class="{'row-answered-call': item.state === 'active', 'row-hovered' : item.hovered, 'row-selected': item.selected," ng-mouseover="highlight(item)" ng-dblclick="goToDetails(item)">


.row-answered-call  {
    background-color: g-hover !important;
}

问题出现在我切换到下一个标签后，用用户照片替换“类型”列（这会使行的高度也增加）。我使用变量（currentView）来跟踪将呈现的td：​​

<td ng-hide="currentView === 0" style="width: 8%">
    <div ng-if="item.type === CallTypes.VIDEO_CALL" class="table-group-thumb" style="background-image: url('{{item.thumbnailUrl}}')"></div>
    <div ng-if="item.type === CallTypes.MESSAGE" class="table-group-thumb"><img ng-src="{{ROOT_URL + ImagePaths.COLORED_MESSAGE}}" /></div>
    <div ng-if="item.type === CallTypes.VOICE_CALL" class="table-group-thumb"><img ng-src="{{ROOT_URL + ImagePaths.COLORED_VOICE_CALL}}" /></div></td>
<td style="width: 8%" ng-show="currentView === 0">
    <i ng-class="{'icon--guardian-phone': item.type === CallTypes.VOICE_CALL, 'icon--guardian-message': item.type === CallTypes.MESSAGE, 'icon--guardian-video-call': item.type === CallTypes.VIDEO_CALL}"></i>
</td>

Css现在崩溃了。行没有正确填充颜色。我认为这是因为行的高度已经改变，之后没有重新加载css。 有人知道这个问题，请给我一些建议或想法来解决这个问题。

---于2017年5月8日 - 上午11:41更新

我合并了2个tds并从ng-hide和ng-show更改为ng-if。

<td style="width: 8%">
     <div ng-if="currentView !== 0 && item.type === CallTypes.VIDEO_CALL" class="table-group-thumb" style="background-image: url('{{item.thumbnailUrl}}')"></div>
     <div ng-if=" currentView !== 0 && item.type === CallTypes.MESSAGE" class="table-group-thumb"><img ng-src="{{ROOT_URL + ImagePaths.COLORED_MESSAGE}}" /></div>
     <div ng-if=" currentView !== 0 && item.type === CallTypes.VOICE_CALL" class="table-group-thumb"><img ng-src="{{ROOT_URL + ImagePaths.COLORED_VOICE_CALL}}" /></div>
     <i ng-if="currentView === 0" ng-class="{'icon--guardian-phone': item.type === CallTypes.VOICE_CALL, 'icon--guardian-message': item.type === CallTypes.MESSAGE, 'icon--guardian-video-call': item.type === CallTypes.VIDEO_CALL}"></i>
</td>

检查HTML以及这些tr，td没有看到任何问题，background-color属性包含正确的值，但实际上css仍然像我上面的截图一样崩溃。

Thanks,
Ken

Answer 1

.ng-class {             溢出：隐藏}