博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
AngularJS中的DOM与事件
阅读量:4338 次
发布时间:2019-06-07

本文共 2015 字,大约阅读时间需要 6 分钟。

  前 言

AngularJS中的DOM与事件

                    AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。

 

 ng-disabled="true/false" 传入true表示禁用,传入false表示可用
代码:
				

{

{myCheck}}


 效果:

 

ng-show是否显示 传入true显示false隐藏
代码:
        

我显示出来啦!!!


 效果:

 

 

ng-hide 是否隐藏
        

我显示出来啦!!!


ng-if:是否移除元素,当传入true显示,传入false移除
效果与ng-show相同,但是ng-show和ng-hide只是隐藏元素,而ng-if是将元素直接从DOM中移除
        

我显示出来啦!!!


在console中显示效果

ng-bind-html :相当于innerHTML,而ng-bind 相当于 innerText

 

注意,要使用ng-bind-html,必须导入angular-sanitize.js文件进行安全验证,同时需要在声明模块的时候,在数组中注入安全验证 模块'naSanitize'
ng-checked 设置复选框或单选框的选中状态 传入true设置当前复选框被选中
 Check all
Volvo
Ford
Mercedes

 

 

 

ng-class: 用于设置给元素添加class类
可选值:
①可以是字符串表示直接给元素添加对应的class。多个class之间用空格分隔
②可以是对象。对象的键表示class名字,对象的值为true或false,当值为true时表示添加对应的class
③可以是数组,数组中的值可以是字符串或对象,判断同上。
这是一个div
这是一个div
这是一个div

 

ng-switch 根据变量 的值,选择不同的ng-switch-when来显示,当没有合适的选项时,显示ng-switch-default
我喜欢的网站                

菜鸟教程

欢迎访问菜鸟教程

Google

欢迎访问Google

淘宝

欢迎访问淘宝

切换

选择不同选项显示对应的值。


ng-click 定义AngularJS的点击事件ng-click 只能触发绑定在AngularJS作用域上面的属性和方法
AngularJS 中的事件AngularJS 中的事件只能触发绑定在AngularJS作用域上面的属性和方法
                                

控制台可看到按回车时是true,其他键是false

 

 

转载于:https://www.cnblogs.com/ljr001/p/7589021.html

你可能感兴趣的文章
阶段3 2.Spring_04.Spring的常用注解_2 常用IOC注解按照作用分类
查看>>
阶段3 2.Spring_09.JdbcTemplate的基本使用_5 JdbcTemplate在spring的ioc中使用
查看>>
阶段3 3.SpringMVC·_07.SSM整合案例_02.ssm整合之搭建环境
查看>>
小D课堂 - 零基础入门SpringBoot2.X到实战_第1节零基础快速入门SpringBoot2.0_3、快速创建SpringBoot应用之手工创建web应用...
查看>>
阶段3 3.SpringMVC·_07.SSM整合案例_04.ssm整合之编写SpringMVC框架
查看>>
小D课堂 - 零基础入门SpringBoot2.X到实战_第1节零基础快速入门SpringBoot2.0_5、SpringBoot2.x的依赖默认Maven版本...
查看>>
阶段3 3.SpringMVC·_07.SSM整合案例_08.ssm整合之Spring整合MyBatis框架
查看>>
小D课堂 - 零基础入门SpringBoot2.X到实战_第2节 SpringBoot接口Http协议开发实战_9、SpringBoot基础HTTP其他提交方法请求实战...
查看>>
小D课堂 - 零基础入门SpringBoot2.X到实战_第2节 SpringBoot接口Http协议开发实战_12、SpringBoot2.x文件上传实战...
查看>>
小D课堂 - 零基础入门SpringBoot2.X到实战_第4节 Springboot2.0单元测试进阶实战和自定义异常处理_19、SpringBoot个性化启动banner设置debug日志...
查看>>
小D课堂 - 零基础入门SpringBoot2.X到实战_第4节 Springboot2.0单元测试进阶实战和自定义异常处理_20、SpringBoot2.x配置全局异常实战...
查看>>
小D课堂 - 零基础入门SpringBoot2.X到实战_第5节 SpringBoot部署war项目到tomcat9和启动原理讲解_23、SpringBoot2.x启动原理概述...
查看>>
小D课堂 - 零基础入门SpringBoot2.X到实战_第4节 Springboot2.0单元测试进阶实战和自定义异常处理_21、SpringBoot2.x配置全局异常返回自定义页面...
查看>>
小D课堂 - 零基础入门SpringBoot2.X到实战_第8节 数据库操作之整合Mybaties和事务讲解_32..SpringBoot2.x持久化数据方式介绍...
查看>>
小D课堂 - 零基础入门SpringBoot2.X到实战_第8节 数据库操作之整合Mybaties和事务讲解_34、SpringBoot整合Mybatis实操和打印SQL语句...
查看>>
小D课堂 - 零基础入门SpringBoot2.X到实战_第8节 数据库操作之整合Mybaties和事务讲解_35、事务介绍和常见的隔离级别,传播行为...
查看>>
小D课堂 - 零基础入门SpringBoot2.X到实战_第9节 SpringBoot2.x整合Redis实战_40、Redis工具类封装讲解和实战...
查看>>
小D课堂 - 零基础入门SpringBoot2.X到实战_第9节 SpringBoot2.x整合Redis实战_37、分布式缓存Redis介绍...
查看>>
小D课堂 - 零基础入门SpringBoot2.X到实战_第10节 SpringBoot整合定时任务和异步任务处理_42、SpringBoot常用定时任务配置实战...
查看>>
小D课堂 - 零基础入门SpringBoot2.X到实战_第9节 SpringBoot2.x整合Redis实战_39、SpringBoot2.x整合redis实战讲解...
查看>>