前 言
AngularJS中的DOM与事件
AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。
ng-disabled="true/false" 传入true表示禁用，传入false表示可用
代码：
<label><input type="checkbox" ng-model="myCheck" />是否同意</label><button ng-disabled="!myCheck">按钮</button><p>{{myCheck}}</p><hr />效果:
ng-show是否显示 传入true显示false隐藏
代码：
<label> ???????<input type="checkbox" ng-model="myShow" />是否显示 ???????</label> ???????<p ng-show="myShow">我显示出来啦！！！</p> ???????<hr />
效果:
ng-hide 是否隐藏
<label> ???????<input type="checkbox" ng-model="myHide" />是否隐藏 ???????</label> ???????<p ng-hide="myHide">我显示出来啦！！！</p> ???????<hr />
ng-if:是否移除元素,当传入true显示，传入false移除
效果与ng-show相同，但是ng-show和ng-hide只是隐藏元素，而ng-if是将元素直接从DOM中移除
<label> ???????<input type="checkbox" ng-model="myIf" />是否移除？ ???????</label> ???????<p ng-if="!myIf">我显示出来啦！！！</p> ???????????????<hr />
在console中显示效果
ng-bind-html :相当于innerHTML,而ng-bind 相当于 innerText
注意，要使用ng-bind-html，必须导入angular-sanitize.js文件进行安全验证，同时需要在声明模块的时候，在数组中注入安全验证 模块‘naSanitize‘
<div ng-bind-html="html"></div>
<script src="js/angular-sanitize.js"></script><script> ???angular.module("app",[‘ngSanitize‘])</script>ng-checked 设置复选框或单选框的选中状态 传入true设置当前复选框被选中
<input type="checkbox" ng-model="all"> Check all<br><br> <input type="checkbox" ng-checked="all">Volvo<br> <input type="checkbox" ng-checked="all">Ford<br> <input type="checkbox" ng-checked="all">Mercedes
ng-class: 用于设置给元素添加class类
可选值：
①可以是字符串表示直接给元素添加对应的class。多个class之间用空格分隔
②可以是对象。对象的键表示class名字，对象的值为true或false，当值为true时表示添加对应的class
③可以是数组，数组中的值可以是字符串或对象，判断同上。
???????????<div ng-class="‘div‘">这是一个div</div> ???????????<label> ???????????<input type="checkbox" ng-model="myClass" />给div添加样式 ???????????</label> ???????????<div ng-class="{‘div‘:myClass,‘div1‘:!myClass}">这是一个div</div> ???????????<div ng-class="[{‘div‘:myClass,‘div1‘:!myClass},‘div3‘]">这是一个div</div><style> ???????????.div{ ???????????????width:200px; ???????????????height: 200px; ???????????????background-color: red; ???????????} ???????????.div1{ ???????????????width:200px; ???????????????height: 200px; ???????????????background-color: green; ???????????} ???????????.div3{ ???????????????color:blue; ???????????} ???????</style>ng-switch 根据变量 的值，选择不同的ng-switch-when来显示，当没有合适的选项时，显示ng-switch-default
我喜欢的网站 ???????<select ng-model="myVar"> ?????????<option value="aaaa">切回默认状态！ ?????????<option value="runoob">www.runoob.com ?????????<option value="google">www.google.com ?????????<option value="taobao">www.taobao.com ???????</select> ???????<hr> ???????<div ng-switch="myVar"> ?????????<div ng-switch-when="runoob"> ????????????<h1>菜鸟教程</h1> ????????????<p>欢迎访问菜鸟教程</p> ?????????</div> ?????????<div ng-switch-when="google"> ????????????<h1>Google</h1> ????????????<p>欢迎访问Google</p> ?????????</div> ?????????<div ng-switch-when="taobao"> ????????????<h1>淘宝</h1> ????????????<p>欢迎访问淘宝</p> ?????????</div> ?????????<div ng-switch-default> ????????????<h1>切换</h1> ????????????<p>选择不同选项显示对应的值。</p> ?????????</div> ???????</div> ???????<hr>
ng-click 定义AngularJS的点击事件ng-click 只能触发绑定在AngularJS作用域上面的属性和方法
AngularJS 中的事件AngularJS 中的事件只能触发绑定在AngularJS作用域上面的属性和方法
<button ng-click="func()">点我弹个窗</button> ???????<button ng-mouseover="func()">点我弹个窗</button> ???????<button ng-mouseout="func()">点我弹个窗</button> ???????<input type="text" ng-keydown="keyDown()"> ???????<input type="text" ng-foucus=""><!--获得焦点--> ???????<input type="text" ng-blur=""><!--丢失焦点--> ???????<input type="text" ng-change=""><!--内容被改变--> ???????????????????????????<script src="js/angular.js"></script> ???????<script src="js/angular-sanitize.js"></script> ???????<script> ???????????????????????angular.module("app",[‘ngSanitize‘]) ???????????.controller("ctrl",function($scope){ ???????????????$scope.func=function(){ ???????????????alert(12) ???????????} ???????????????$scope.keyDown=function(){ ???????????????????console.log(event.keyCode==13) ???????????????} ???????????}) ???????????????????</script>控制台可看到按回车时是true，其他键是false
AngularJS中的DOM与事件
原文地址：http://www.cnblogs.com/ljr001/p/7589021.html