前 言
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
![](https://i-blog.csdnimg.cn/blog_migrate/7d20a6747f82b5be839f761b2fd8a216.png)
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