Поэтому у меня есть сетка div, которую я пытаюсь динамически раскрашивать, проверяя значение булевых в ng-if, НО, когда я помещаю код внутри ng-если цвет и css из div перепутаны.
Например, следующий код:
<div class="rTableCellA" >1</div>
Отображает ячейку, которая отформатирована тонкой и цветной в соответствии с определением rTableCellA в CSS. Однако окружающая эта строка кода с ng-if, хотя и помешает цвету ячейки, причем только левая половина будет окрашена. То же самое происходит, когда я окружаю код с помощью ng-switch. ЗАЧЕМ?!
заранее спасибо
вы можете использовать ng-класс для вашего случая
<!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>
Это не относится к ng-if
. Просто добавьте класс .rTableCellA
в div с ng-if
.
Проблема заключалась в том, что div внутри ng-if
имеет класс .rTableCellA
чтобы он не "брал" полную ширину из-за display:table-cell
. Как на изображении ниже:
<!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>
ng-class
. Ты знаешь как это сделать?