【AngularJS】—— 4 表达式
时间:2022-04-22
本文章向大家介绍【AngularJS】—— 4 表达式,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前面了解了AngularJS的基本用法,这里就跟着PDF一起学习下表达式的相关内容。
在AngularJS中的表达式,与js中并不完全相同。
首先它的表达式要放在{{}}才能使用,其次相对于javascript中的表达式概念,它有以下几点不同:
1 作用域不同
在javascript中默认的作用于是window,但是在angularJs中就不同了。它使用$scope控制作用于。
2 允许未定义的值
在angularjs中,如果使用了未定义的表达式,也不会出现错误,直接返回空值。
3 过滤器
可以在表达式中使用 | 管道命令符,添加过滤器,与UNIX的命令行类似。
4 $符号
用以区别angular的方法与用户自定义的方法。
下面看一段小代码:
<!doctype html>
<html ng-app>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body>
<div ng-controller="ctl">
name:<input ng-model="name" type="text">
<button ng-click="reset()">reset</button>
<br>
{{name}}
<br>
hello ! {{test}}
<br>
filter : {{name | uppercase}}
</div>
<script type="text/javascript">
function ctl($scope){
var str = "init";
$scope.name = str;
$scope.reset = function(){
$scope.name = str;
}
}
</script>
</body>
</html>
通过reset触发reset方法,重置name变量的内容;
在表达式中,引用了未定义的test,但是并没有报错,直接默认显示为空;—— {{test}}
最后使用过滤器,将表达式中name的值转化成大写。—— {{name | uppercase}}
运行结果:
- Flash/Flex学习笔记(29):MovieClip帧/时间轴的控制
- Oracle日常运维操作总结-数据库的启动和关闭
- Python中Json解析的坑
- Flash/Flex学习笔记(28):动态文本的滚动控制
- CentOS7下Elasticsearch集群部署记录
- Flash/Flex学习笔记(27):摄像头/麦克风的视频/音量指示器
- Flash/Flex学习笔记(26):AS3自定义右键菜单
- Python27中Json对中文的处理
- Python在VSCode中进入交互界面调试
- CentOS7下单机部署RabbltMQ环境的操作记录
- Flash/Flex学习笔记(24):粒子效果
- 针对业务日志的监控报警设置
- 对广晟有色的数据分析
- Flash/Flex学习笔记(22):滤镜学习
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Java9-Reactive Stream API响应式编程
- mybatis-plus增删改查以及前后端分离模式下的项目应用
- docker(常用软件安装)
- PyTorch版:集成注意力和MobileNet的YOLOv4
- 从源代码级别看懂MinIO对象存储网关的实现
- 4种主流超参数调优技术
- 一分钟学Python| 面向对象(上)
- Python 为什么不支持 switch 语句?
- 你还在认为 count(1) 比 count(*) 效率高?
- 一分钟学Python| 面向对象(中)
- uni-app自定义打包目录package.json命令配置
- 在Zeppelin中如何使用Hive
- B站真题:如何判断括号是否有效?
- (在模仿中精进数据可视化03)OD数据的特殊可视化方式
- Ubuntu20.04 体验和美化