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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.