使用angular js有条件地显示HTML，但是当我将HTML代码放在ng-if或ng-switch语句中时，CSS被弄乱了
[英]Using angular js to conditionally display HTML, but the CSS is being messed up when i put the HTML code inside ng-if or ng-switch statements
问题描述
So I have a grid of div's that I am attempting to color dynamically by checking the value of booleans in ng-if's BUT when i put the code inside the ng-if's the color and css of the div gets messed up. 
所以我有一个div网格，我尝试通过将ng-if的代码放入ng-if的颜色中来检查ng-if的BUT中的布尔值，从而动态着色。div的css变得混乱了。
For example the following code: 例如下面的代码：
<div class="rTableCellA" >1</div>
Displays a cell that is formatted fine and colored according to the definition of rTableCellA in the CSS. 根据CSS中的rTableCellA的定义，显示单元格的格式和颜色。 However surrounding this line of code with an ng-if though messes up the color of the cell, with only the left half being colored. 但是，用ng-if包围这行代码会弄乱单元格的颜色，只有左半部分是彩色的。 Same happens when I surround the code with ng-switch's. 当我用ng-switch包围代码时，也会发生同样的情况。 WHY?! 为什么？！
Thanks in advance 提前致谢
2 个解决方案
解决方案1
0 2016-03-28 07:10:10
It's not relevant to the ng-if . 与ng-if无关。 Just add the class .rTableCellA to the div with the ng-if . 只需使用ng-if将.rTableCellA类.rTableCellA到div中。
The problem was that the div inside the ng-if has the class .rTableCellA so it's not "take" the full width because of the display:table-cell . 问题在于ng-if内部的div具有类.rTableCellA因此由于display:table-cell ，它不能“占用”整个宽度。 Like in the image below: 如下图所示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <style type="text/css"> .rTable { display: table; width: 25%; } .rTableRow { display: table-row; } .rTableHeading { display: table-header-group; background-color: #ddd; } .rTableHead { display: table-cell; padding: 3px 10px; border: 0.5px solid #999999; } .rTableCellA { display: table-cell; padding: 3px 10px; border: 0.5px solid #999999; background-color: #006bb3; } .blockedOut { display: table-cell; padding: 3px 10px; border: 0.5px solid #999999; background-color: #ff9900; } .rTableHeading { display: table-header-group; background-color: #ddd; font-weight: bold; } .rTableFoot { display: table-footer-group; font-weight: bold; background-color: #ddd; } .rTableBody { display: table-row-group; } </style> </head> <body> <div class="rTable"> <div class="rTableRow"> <div class="rTableHead"> <strong>Monday</strong> </div> <div class="rTableHead"> <strong>Tuesday</strong> </div> <div class="rTableHead"> <strong>Wednesday</strong> </div> <div class="rTableHead"> <strong>Thursday</strong> </div> <div class="rTableHead"> <strong>Friday</strong> </div> <div class="rTableHead"> <strong>Saturday</strong> </div> <div class="rTableHead"> <strong>Sunday</strong> </div> </div> <div class="rTableRow"> <div ng-if="'a' == 'a'" class="rTableCellA">1</div> <div class="rTableCellA" >2</div> <div class="rTableCellA" >3</div> <div class="rTableCellA" >4</div> <div class="blockedOut" >5</div> <div class="rTableCellA" >6</div> <div class="rTableCellA" >8</div> </div> <div class="rTableRow"> <div class="rTableCellA" >1</div> <div class="blockedOut" >2</div> <div class="rTableCellA" >3</div> <div class="blockedOut" >4</div> <div class="rTableCellA" >5</div> <div class="rTableCellA" >6</div> <div class="rTableCellA" >8</div> </div> </div> </body> </html>
解决方案2
0 已采纳 2016-03-28 07:19:21
you can use ng-class for your case 您可以为您的情况使用ng-class
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style type="text/css">
.rTable {
display: table;
width: 25%;
}
.rTableRow {
display: table-row;
}
.rTableHeading {
display: table-header-group;
background-color: #ddd;
}
.rTableHead {
display: table-cell;
padding: 3px 10px;
border: 0.5px solid #999999;
}
.rTableCellA {
display: table-cell;
padding: 3px 10px;
border: 0.5px solid #999999;
background-color: #006bb3;
}
.blockedOut {
display: table-cell;
padding: 3px 10px;
border: 0.5px solid #999999;
background-color: #ff9900;
}
.rTableHeading {
display: table-header-group;
background-color: #ddd;
font-weight: bold;
}
.rTableFoot {
display: table-footer-group;
font-weight: bold;
background-color: #ddd;
}
.rTableBody {
display: table-row-group;
}
</style>
</head>
<body ng-app>
<div class="rTable">
<div class="rTableRow">
<div class="rTableHead">
<strong>Monday</strong>
</div>
<div class="rTableHead">
<strong>Tuesday</strong>
</div>
<div class="rTableHead">
<strong>Wednesday</strong>
</div>
<div class="rTableHead">
<strong>Thursday</strong>
</div>
<div class="rTableHead">
<strong>Friday</strong>
</div>
<div class="rTableHead">
<strong>Saturday</strong>
</div>
<div class="rTableHead">
<strong>Sunday</strong>
</div>
</div>
<div class="rTableRow">
<div ng-class="{rTableCellA: a == a}">1</div>
<div class="rTableCellA">2</div>
<div class="rTableCellA">3</div>
<div class="rTableCellA">4</div>
<div class="blockedOut">5</div>
<div class="rTableCellA">6</div>
<div class="rTableCellA">8</div>
</div>
<div class="rTableRow">
<div class="rTableCellA">1</div>
<div class="blockedOut">2</div>
<div class="rTableCellA">3</div>
<div class="blockedOut">4</div>
<div class="rTableCellA">5</div>
<div class="rTableCellA">6</div>
<div class="rTableCellA">8</div>
</div>
</div </body>
</html>
http://jsbin.com/bicidahega/1/edit?html,output http://jsbin.com/bicidahega/1/edit?html，输出
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.