AngularJS HTML DOM
AngularJS 具有将应用程序数据绑定到 HTML DOM 元素属性的指令。
ng-disabled 指令
ng-disabled 指令将 AngularJS 应用程序数据绑定到 HTML 元素的禁用属性。
AngularJS 实例
<!DOCTYPE html><html><script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script><body><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></body></html>
程序解释:
ng-disabled 指令将应用程序数据 mySwitch 绑定到 HTML 按钮的 disabled 属性。
ng-model 指令将 HTML checkbox 元素的值绑定到 mySwitch 的值。
如果 mySwitch 的值计算为 true，则该按钮将被禁用:
<p><button disabled>点击一下!</button></p>
如果 mySwitch 的值计算为 false，则该按钮不会被禁用:
<p><button>点击一下!</button></p>
ng-show 指令
ng-show 指令显示或隐藏 HTML 元素。
AngularJS 实例
<!DOCTYPE html><html><script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script><body><div ng-app=""><p ng-show="true">我可见</p><p ng-show="false">我不可见</p></div></body></html>
ng-show 指令根据 ng-show 的值显示（或隐藏）HTML元素。
可以使用任何计算结果为 true 或 false 的表达式:
AngularJS 实例
<!DOCTYPE html><html><script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script><body><div ng-app="" ng-init="hour=13"><p ng-show="hour > 12">我可见</p></div></body></html>
在下一章中，还有更多的例子，使用点击按钮隐藏 HTML 元素。
ng-hide 指令
ng-hide 指令隐藏或显示 HTML 元素。
AngularJS 实例
<!DOCTYPE html><html><script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script><body><div ng-app=""><p ng-hide="true">我不可见</p><p ng-hide="false">我可见</p></div></body></html>