AngularJS HTML DOM
AngularJS provides instructions for application data binding attributes HTML DOM elements.
ng-disabled instruction
ng-disabled instruction directly bind application data to HTML disabled property.
AngularJS examples
<Div ng-app = "" ng-init = "mySwitch = true">
<P>
<Button ng-disabled = "mySwitch "> Point me! </ Button>
</ P>
<P>
<Input type = "checkbox" ng -model = "mySwitch"> button
</ P>
<P>
{{MySwitch}}
</ P>
</ Div>
<P>
<Button ng-disabled = "mySwitch "> Point me! </ Button>
</ P>
<P>
<Input type = "checkbox" ng -model = "mySwitch"> button
</ P>
<P>
{{MySwitch}}
</ P>
</ Div>
try it"
Examples to explain:
ng-disabled instruction bound application data "mySwitch" to HTML disabled property.
ng-model directive bind "mySwitch" to HTML input checkbox element content (value).
If mySwitch true, the button is unavailable:
<P>
<Button disabled> Point me! </ Button>
</ P>
<Button disabled> Point me! </ Button>
</ P>
If mySwitch is false, you can use the button:
<P>
<Button> Point me! </ Button>
</ P>
<Button> Point me! </ Button>
</ P>
ng-show instructions
ng-show instructions hide or display an HTML element.
AngularJS examples
<Div ng-app = "" >
<P ng-show = "true "> I am visible. </ P>
<P ng-show = "false "> I was invisible. </ P>
</ Div>
<P ng-show = "true "> I am visible. </ P>
<P ng-show = "false "> I was invisible. </ P>
</ Div>
try it"
ng-show command value based on the value to display (hide) HTML elements.
You can use an expression to calculate a Boolean value (true or false):
AngularJS examples
<Div ng-app = "" ng-init = "hour = 13 ">
<P ng-show = "hour> 12 "> I am visible. </ P>
</ Div>
try it"
 | In the next chapter, we will all be hidden by clicking the button more instances of an HTML element. |
|---|
ng-hide command
ng-hide command to hide or display HTML elements.
AngularJS examples
< div ng-app= "" >
< p ng-hide= "true" >我是不可见的。 < /p >
< p ng-hide= "false" >我是可见的。 < /p >
< /div >
< p ng-hide= "true" >我是不可见的。 < /p >
< p ng-hide= "false" >我是可见的。 < /p >
< /div >
try it"