The ng-click directive in AngularJS

The AngularJS ng-click directive enables us to showroom customized behavior as an element is clicked. For example, you may use the ngClick to show và hide the content of specified elements lượt thích a paragraph, a form etc. As a button or liên kết is clicked.

Bạn đang xem: Angularjs ng

For example, you may use the ngClick to lớn show and hide the nội dung of specified elements lượt thích a paragraph, a form etc. As a button or link is clicked.

Syntax of using ng-click directive

This is how you may use the ng-click directive:

There, the button is an element that can be replaced by any other HTML element lượt thích a link, span, paragraph, div etc. Where you want khổng lồ perform certain custom behavior as that element is clicked.

Xem thêm: Nhẫn Lông Voi Có Ý Nghĩa Gì, Ý Nghĩa Phong Thuỷ Của Nhẫn Lông Voi

See the examples in the following section for learning more about the angular ngClick directive.

A chạy thử of ng-click on button click event

In this example, the ng-click directive is executed on the click sự kiện of the button. Every time you click the button, the number of times button is clicked is shown below:


See online demo và code

The Code:

class="btn btn-danger" ng-click="clicked = clicked + 1" ng-init="clicked=0">Click here khổng lồ execute ng-click

You can see, the ng-click directive is placed inside the button element where a value is incremented for each click. By using the ng-init directive, the clicked value is mix initially as 0.

Xem thêm: Máy Lạnh Toshiba Bảo Hành Điều Hòa Toshiba Diệt Mội, Bảo Hành Điều Hòa Toshiba Diệt Mội

A thử nghiệm of ng-click in AngularJS with a link

Following is a more visual example of using the ng-click attribute. In this demo, it is used in a links element along with ng-show and ng-hide directives. As you click the liên kết “Click the link to display content” the h2 heading will display. Upon clicking the adjacent button, “Hide Content”, the content will disappear:


See online demo & code

The Code:

On the click event of the link, the ng-click executes and makes the displaycontent true. It will display the content in the h2 element which is mapped with the ng-show directive.

AccordionAJAXAnimationsAutocompleteButtonsCarouselChartsCheckboxDate & TimeDropdownEffectsFormsHoverLayoutLightboxLoaderMapsMenusMobileModalsParallaxPopoverProgress barResponsiveRotatorScrollShopping CartSlidersslideshowTableTabsTextTooltipsTransitionsValidationZoom