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.

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. 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. Same happens when I surround the code with ng-switch's. WHY?!

Thanks in advance

Answers 1

  • you can use ng-class for your case

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


Related Articles