AngularJS,HTML,DOM,实例,AngularJS,中的HTML,DOM,AngularJS,HTML,DOM详解AngularJS HTML DOM
AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。
ng-disabled 指令
ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。
AngularJS 实例 <!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><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>运行效果： 按钮 true 实例讲解：
ng-disabled 指令绑定应用程序数据 "mySwitch" 到 HTML 的 disabled 属性。
ng-model 指令绑定 "mySwitch" 到 HTML input checkbox 元素的内容（value）。
如果 mySwitch 为true, 按钮将不可用: <p><button disabled>点我！</button></p> 如果 mySwitch 为false, 按钮则可用: <p><button>点我!</button></p> ng-show 指令
ng-show 指令隐藏或显示一个 HTML 元素。
AngularJS 实例 <!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app=""><p ng-show="true">我是可见的。</p><p ng-show="false">我是不可见的。</p></div> </body></html> 运行效果： 我是可见的。 ng-show 指令根据 value 的值来显示（隐藏）HTML 元素。
你可以使用表达式来计算布尔值（ true 或 false）:
AngularJS 实例 <!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app="" ng-init="hour=13"><p ng-show="hour > 12">我是可见的。</p></div></body></html> 运行结果： 我是可见的。 Note 在下一个章节中，我们将为大家更多通过点击按钮来隐藏 HTML 元素的实例。
ng-hide 指令
ng-hide 指令用于隐藏或显示 HTML 元素。
AngularJS 实例 <!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app=""><p ng-hide="true">我是不可见的。</p><p ng-hide="false">我是可见的。</p></div> </body></html> 运行结果： 我是可见的。 以上就是对AngularJS HTML DOM 资料的整理，后续继续补充，希望能帮助编程AngularJS的朋友。
AngularJS,HTML,DOM,实例,AngularJS,中的HTML,DOM,AngularJS,HTML,DOM详解
|
