A small bug related to ng-show and NG-if

When using Bootstrap, we often use button groups, that is, BTN-group. If you observe them carefully, the first and last buttons in a button group have rounded corners, for example:

However, the buttons in the middle have no rounded corners, which looks more beautiful.

When used in combination with angular, you sometimes need to hide some buttons based on some conditions. When you hide the first or last button, some minor problems may occur.

Code:

<div class="row" ng-controller=‘myCtrl‘>            <div class="col-lg-offset-1">                <div class="btn-group">                    <button class=‘btn btn-primary‘>button1</button>                    <button class=‘btn btn-primary‘>button2</button>                    <button class=‘btn btn-primary‘ ng-show=‘false‘>button3</button>                </div>            </div>        </div>

Effect

We found that the corner of button2 is missing, which is inconsistent with our expectation.

The problem is caused by ng-show. We know that ng-show only changes the display attribute of the element, So we change ng-show = 'false' to style = 'display: none, the rounded corner disappears.

So what should we do to make it show rounded corners?

If we want to display the rounded corner, use ng-if to change ng-show = 'false' in the code to ng-If = 'false.

The reason is: NG-If determines the creation and destruction of the current Dom element based on the value of the expression. If the expression returns true, it is created. Otherwise, it is destroyed. Destruction means that the DOM element is deleted from the page.

Effect

The rounded corner shows that button3 has been deleted from the page.

Further, we can use the developer tool to find that the DOM element does not exist:

 

A small bug related to ng-show and NG-if