AngularJS HTML DOM
AngularJS 為HTML DOM 元素的屬性提供了綁定應用數據的指令。
ng-disabled 指令
ng-disabled指令直接綁定應用程序數據到HTML的disabled屬性。
AngularJS 實例
< div ng-app= "" ng-init= "mySwitch=true" >
< p >
< button ng-disabled= "mySwitch" >點我! < /button >
< /p >
< p >
< input type= "checkbox" ng-model= "mySwitch" >按鈕
< /p >
< p >
{{ mySwitch }}
< /p >
< /div >
< p >
< button ng-disabled= "mySwitch" >點我! < /button >
< /p >
< p >
< input type= "checkbox" ng-model= "mySwitch" >按鈕
< /p >
< p >
{{ mySwitch }}
< /p >
< /div >
嘗試一下»
實例講解：
ng-disabled指令綁定應用程序數據"mySwitch"到HTML的disabled屬性。
ng-model指令綁定"mySwitch"到HTML input checkbox元素的內容（value）。
如果mySwitch為true ,按鈕將不可用:
< p >
< button disabled >點我！ < /button >
< /p >
< button disabled >點我！ < /button >
< /p >
如果mySwitch為false ,按鈕則可用:
< p >
< button >點我! < /button >
< /p >
< button >點我! < /button >
< /p >
ng-show 指令
ng-show指令隱藏或顯示一個HTML元素。
AngularJS 實例
< div ng-app= "" >
< p ng-show= "true" >我是可見的。 < /p >
< p ng-show= "false" >我是不可見的。 < /p >
< /div >
< p ng-show= "true" >我是可見的。 < /p >
< p ng-show= "false" >我是不可見的。 < /p >
< /div >
嘗試一下»
ng-show指令根據value的值來顯示（隱藏）HTML元素。
你可以使用表達式來計算布爾值（ true 或false）:
AngularJS 實例
< div ng-app = " " ng-init = " hour=13 " >
< p ng-show = " hour > 12 " > 我是可見的。 </ p >
</ div >
嘗試一下»
 | 在下一個章節中，我們將為大家更多通過點擊按鈕來隱藏HTML 元素的實例。 |
|---|
ng-hide 指令
ng-hide指令用於隱藏或顯示HTML元素。
AngularJS 實例
< 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 >
嘗試一下»