gpt4 book ai didi

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

转载 作者:可可西里 更新时间:2023-11-01 13:45:47 24 4
gpt4 key购买 nike

加载时我的主页如下: enter image description here

最初,一些行使用 ng-class 填充了背景颜色(蓝色),这里是“row-answered-call”,如下所示:

<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>

enter image description here

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

最佳答案

.ng类{ 溢出:隐藏

关于javascript - AngularJS 1 - 切换选项卡时 CSS 崩溃,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43799409/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com