Использование угловых js для условного отображения HTML, но CSS портится, когда я помещаю HTML-код в операторы ng-if или ng-switch

Question

Использование угловых js для условного отображения HTML, но CSS портится, когда я помещаю HTML-код в операторы ng-if или ng-switch

0

Поэтому у меня есть сетка div, которую я пытаюсь динамически раскрашивать, проверяя значение булевых в ng-if, НО, когда я помещаю код внутри ng-если цвет и css из div перепутаны.

Например, следующий код:

<div class="rTableCellA" >1</div>

Отображает ячейку, которая отформатирована тонкой и цветной в соответствии с определением rTableCellA в CSS. Однако окружающая эта строка кода с ng-if, хотя и помешает цвету ячейки, причем только левая половина будет окрашена. То же самое происходит, когда я окружаю код с помощью ng-switch. ЗАЧЕМ?!

заранее спасибо

Mark Keane 28 март 2016, в 09:32

Источник

2

Какой-то реальный код был бы хорош
23tux 28 март 2016, в 06:52
0

<div class = "rTableCellA"> 1 </ div> .rTableCellA {display: table-cell; обивка: 3px 10px; граница: 0.5px solid # 999999; цвет фона: # 006bb3; } Опять же, приведенный выше HTML-код работает нормально, пока я не окружу его символом ng-if, например так: <div ng-if = "day1Availability [0] == false"> цвет фона сетки искажается, и только половина имеет обозначенный цвет. похоже, что CSS как-то переопределяется нг-если
Mark Keane 28 март 2016, в 06:55
2

Это как сказать: мой HTML не работает: <div> почему? Пожалуйста, покажите больше кода, чтобы мы могли помочь
23tux 28 март 2016, в 06:56
0

Попробуйте использовать $parent.color вместо color
Mosh Feu 28 март 2016, в 06:57
0

Я прошу прощения, я пытаюсь добавить код из моего комментария выше в пост, поскольку он добавляет необходимые разъяснения.
Mark Keane 28 март 2016, в 06:58
0

Просто попробуйте создать фрагмент или корзину, чтобы мы могли увидеть проблему.
Mosh Feu 28 март 2016, в 06:59
0

Вы хотите заменить "background-color: # 006bb3;" на "background- $ parent.color: # 006bb3;"?
Mark Keane 28 март 2016, в 07:00
0

Нет, нет .. Я не думаю, что вы имеете в виду тег CSS в style .
Mosh Feu 28 март 2016, в 07:04
0

jsbin.com/yomotuhiva/edit?html, но это показывает проблему! Вы увидите, что первая ячейка наполовину неокрашена. если вы удалите ng-if вокруг него, он будет окрашен, как и должно быть. Спасибо, парни.
Mark Keane 28 март 2016, в 07:05

Показать ещё 7 комментариев

Теги:

javascript

jquery

html

angularjs

css

2 ответа

0

Это не относится к 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>

Mosh Feu 28 март 2016, в 05:11

0

Ну, мой код предназначен для того, чтобы решить, какой класс также установить div на основе результата ng-if. Поэтому, если ng-if имеет значение true, установите для внутреннего элемента div класс rTableCellA, а если для него значение false, установите для класса значение blockOut ... затем класс устанавливает цвет в соответствии с CSS. Я могу сделать это? Приведенный выше код не позволяет это, к сожалению.
Mark Keane 28 март 2016, в 07:13
0

Таким образом, вы можете использовать ng-class . Ты знаешь как это сделать?
Mosh Feu 28 март 2016, в 07:14
0

не знаком с этим - я сейчас исследую, как бы я использовал это, чтобы помочь мне. ти.
Mark Keane 28 март 2016, в 07:20
0

ХОРОШО. Дайте мне знать, если вы поймете это.
Mosh Feu 28 март 2016, в 07:38
0

Спасибо чувак. Чтение о классе нг сбило меня с толку, но ответ выше показал мне, как именно это работает в контексте, и моя 2-дневная проблема была решена !! Мое первое использование с переполнением стека было отличным, спасибо за помощь :)
Mark Keane 28 март 2016, в 07:41
0

Мое удовольствие;) Я рад, что смог помочь.
Mosh Feu 28 март 2016, в 07:43

Показать ещё 4 комментария

Ещё вопросы

Какой-то реальный код был бы хорош
<div class = "rTableCellA"> 1 </ div> .rTableCellA {display: table-cell; обивка: 3px 10px; граница: 0.5px solid # 999999; цвет фона: # 006bb3; } Опять же, приведенный выше HTML-код работает нормально, пока я не окружу его символом ng-if, например так: <div ng-if = "day1Availability [0] == false"> цвет фона сетки искажается, и только половина имеет обозначенный цвет. похоже, что CSS как-то переопределяется нг-если
Это как сказать: мой HTML не работает: <div> почему? Пожалуйста, покажите больше кода, чтобы мы могли помочь
Попробуйте использовать $parent.color вместо color
Я прошу прощения, я пытаюсь добавить код из моего комментария выше в пост, поскольку он добавляет необходимые разъяснения.
Просто попробуйте создать фрагмент или корзину, чтобы мы могли увидеть проблему.
Вы хотите заменить "background-color: # 006bb3;" на "background- $ parent.color: # 006bb3;"?
Нет, нет .. Я не думаю, что вы имеете в виду тег CSS в style .
jsbin.com/yomotuhiva/edit?html, но это показывает проблему! Вы увидите, что первая ячейка наполовину неокрашена. если вы удалите ng-if вокруг него, он будет окрашен, как и должно быть. Спасибо, парни.
Ну, мой код предназначен для того, чтобы решить, какой класс также установить div на основе результата ng-if. Поэтому, если ng-if имеет значение true, установите для внутреннего элемента div класс rTableCellA, а если для него значение false, установите для класса значение blockOut ... затем класс устанавливает цвет в соответствии с CSS. Я могу сделать это? Приведенный выше код не позволяет это, к сожалению.
Таким образом, вы можете использовать ng-class . Ты знаешь как это сделать?
не знаком с этим - я сейчас исследую, как бы я использовал это, чтобы помочь мне. ти.
ХОРОШО. Дайте мне знать, если вы поймете это.
Спасибо чувак. Чтение о классе нг сбило меня с толку, но ответ выше показал мне, как именно это работает в контексте, и моя 2-дневная проблема была решена !! Мое первое использование с переполнением стека было отличным, спасибо за помощь :)
Мое удовольствие;) Я рад, что смог помочь.

Neevany · Accepted Answer · 2016-03-28T06-05-00.000Z

вы можете использовать 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>

http://jsbin.com/bicidahega/1/edit?html,output

Спасибо, приятель!! Из любопытства, вы можете дать краткое резюме, почему использование ng-if в моем оригинальном методе не работало?