HomeProgramAngularJS

HTML DOM element in AngularJS

The following AngularJS directives can be used to bind application data to attributes in the HTML DOM element.

  1. ng-disabled: Disabling a control (control) provided
  2. ng-show: Displays a control provided
  3. ng-hide: Hide a control provided
  4. ng-click: Performing a click event in AngularJS

Ng-disabled Directive in AngularJS

Add ng-disable attribute to an HTML button and attach this data to the model. Mount the model to a checkbox to observe the change.

 type = "checkbox" ng-model = "enableDisableButton" > Disable button  ng-disabled = "vohieuhoakichhoatnut" > Nhan vao day!

Ng-show Directive in AngularJS

Add the ng-show attribute to the HTML button and attach it to the model. Mount the model to a checkbox to observe the change.

 type = "checkbox" ng-model = "showHide1" > Show button  ng-show = "showHide1" > Click here!

Ng-hide directive in AngularJS

Add ng-hide attribute to the HTML button and attach it to the model. Mount the model to a checkbox to observe the change.

 type = "checkbox" ng-model = "showHide2" > Hide the button  ng-show = "showHide1" > Click here!

Ng-click directives in AngularJS

Add the ng-click attribute to the HTML Button and attach it to the model. Mount the model to hmtl to observe the change.

 Total clicks: {{clickCounter}}  ng-click = "clickCounter = clickCounter + 1" > Click here!

For example

Here is an example for the description mentioned above.

phantuHTMLDOM.html

 HTML DOM trong AngularJS

For example

 AngularJS QTM  ng-app = "" >  border = "0" >  type = "checkbox" ng-model = "enableDisableButton" > Vô hiệu hóa nút  ng-disabled = "enableDisableButton" > Nhấp vào đây!  type = "checkbox" ng-model = "showHide1" > Hiện nút  ng-show = "showHide1" > Nhấp vào đây!  type = "checkbox" ng-model = "showHide2" >Ẩn nút  ng-hide = "showHide2" > Nhấp vào đây! 
 Tổng số lần nhấp: {{ clickCounter }}  ng-click = "clickCounter = clickCounter + 1" > Nhấp vào đây!

src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">

Result:

Open the phantuHTMLDOM.html page on the web browser and see the results. If you click on the buttons one at a time, the result will be:

HTML DOM element in AngularJS Picture 1

According to Tutorialspoint

Previous article: Controller component in AngularJS

Next lesson: The Module in AngularJS

5 ★ | 2 Vote

You should read it

May be interested

  • The Filter in AngularJSThe Filter in AngularJS
    filter is used to change, filtering data to result in another string. below is a list of common filters commonly used in angularjs.
  • Head element in HTMLHead element in HTML
    in html, the element is a set containing metadata (metadata) placed in tags and tags.
  • Style properties in HTMLStyle properties in HTML
    the style attribute specifies the style for the html element.
  • Ajax in AngularJSAjax in AngularJS
    angularjs provides a $ http control that acts as a service to read data from the server. the server can create calls to the database to receive the logs. angularjs needs data in json format.
  • Text in HTMLText in HTML
    the element in html is used to define a paragraph of text.
  • Form in AngularJSForm in AngularJS
    angularjs complements the form of filling and validation features. you can use ng-click directive to handle the event by clicking on the button and using the flags $ dirty and $ invalid to make it effective. use novalidate with the form declaration to disable the valicate feature of the form. the control section of the form uses an effective set of angularjs events.
  • The id attribute in HTMLThe id attribute in HTML
    in html, the id attribute is used to specify a unique id for an html element (the value must be unique in the html file).
  • Block and inline elements in HTMLBlock and inline elements in HTML
    each element in html has a default display value, depending on which element it is.
  • The Module in AngularJSThe Module in AngularJS
    angularjs supports module-oriented approach. the module is used to distinguish the logic, service and application processing ... and make the code clear.
  • View components in AngularJSView components in AngularJS
    angularjs supports single page application through multiple views on a single page. to do this, angularjs provides ng-view and ng-template directive and $ routeprovider service.

AngularJS