AngularJS开发指南5:AngularJS表达式详解
AngularJS表达式类似Javascript的代码片段,通常在数据绑定中用到,写在双大括号中,如:{{表达式}}
。表达式是用$parse方法来处理的。
下面是一些合法的AngularJS表达式
1+2
3*10 | currency
user.name
你可能会认为AngularJS视图中的表达式就是Javascript表达式,这种认识不完全对,因为AngularJS不会用Javascript的eval()
函数去执行表达式。 不过除了以下几个需要区别的地方以外,你可以把AngularJS表达式看成是Javascript表达式:
- 属性表达式:属性表达式对应于当前的作用域,不像Javascript对应的是全局的window对象。
- 允许未定义值:执行表达式时,AngularJS能够允许undefined或者null,不像Javascript会抛出一个异常。
- 没有控制结构: 你不能在AngularJS表达式中使用“条件判断”、“循环”、“抛出异常”等控制结构。
- 过滤器(类似unix中的管道操作符): 你可以通过过滤器链来传递表达式的结果。例如将日期对象转变成指定的阅读友好的格式。
如果你想要在表达式中使用标准的Javascript,那么你应该把它写成一个控制器的方法,然后在表达式中调用这个方法。如果你想在Javascript中执行AngularJS表达式,你可以使用$eval()方法。
举个例子:
<!doctype html> <html ng-app><head><script src="http://code.angularjs.org/angular-1.0.2.min.js"></script><script>function Cntl2($scope) {var exprs = $scope.exprs = []; $scope.expr = '3*10|currency';$scope.addExp = function(expr) { //在控制器里面定义了一个addExp方法,在这个方法中,使用的是标准的js代码exprs.push(expr); };$scope.removeExp = function(index) {exprs.splice(index, 1);};}</script></head><body><div ng-controller="Cntl2" class="expressions">Expression:<input type='text' ng-model="expr" size="80"/><button ng-click="addExp(expr)">Evaluate</button> <ul><li ng-repeat="expr in exprs">[ <a href="" ng-click="removeExp($index)">X</a> ]<tt>{{expr}}</tt> => <span ng-bind="$parent.$eval(expr)"></span> //这里的expr是在js中,如果想运行此angular表达式,就调用$eval。</li></ul></div></body> </html>
属性表达式
属性表达式计算是发生在作用域中的。Javascript默认是以window为作用域的。AngularJS要使用window作用域的话得用$window来指向全局window对象。 比如说,你使用window中定义的alert()
方法,在AngularJS表达式中必须写成$window.alert()
才行。
举个例子:
<!doctype html> <html ng-app><head><script src="http://code.angularjs.org/angular-1.0.2.min.js"></script><script>function Cntl1($window, $scope){$scope.name = 'World';$scope.greet = function() {($window.mockWindow || $window).alert('Hello ' + $scope.name);}}</script></head><body><div class="example2" ng-controller="Cntl1">Name: <input ng-model="name" type="text"/><button ng-click="greet()">Greet</button></div></body> </html>
允许未定义值
表达式在执行时是可以允许undifined
和null
的。 在Javascript中,计算a.b.c会抛出一个异常,如果这不是一个对象的话。但是如果大多数时候表达式是用来作数据绑定的,像下面这种形式:
{{a.b.c}}
那么表达式返回一个空值会比触发异常更有意义。因为通常我们是在等待服务器的响应,并且变量马上就会被定义和赋值。如果表达式不能容忍未定义的值,那么我们绑定的代码就不得不写成形如:
{{((a||{}).b||{}).c}}
angular在执行未定义的函数a.b.c()是,
也会返回undefined,不会触发异常。
没有流程控制结构
你不能在表达式中使用控制结构。这样设计的原因在于AngularJS的设计理念之一就是逻辑代码都应该在控制器里。如果你需要使用条件、循环、或者处理异常,你就应该写在控制器的方法里。
过滤器
当你将数据呈献给用户时,你很可能需要将数据转换为阅读友好的格式。比方说,你可能需要在显示之前将一个日期对象转换为用户本地的时间格式。你可以用链式的过滤器来传递表达式,像下面这样:
name | uppercase
这个表达式会将name
的值传递给uppercase
这个过滤器。
链式过滤器使用的是下面这样的语法:
value | filter1 | filter2
你也可以通过冒号来给过滤器传递参数,比如,将123显示成带有两位小数的形式:123 | number:2
$符号
你可能会好奇,这个$的前缀有什么用?其实这只是一个标记AngularJS专有属性的符号,用来表示区别于开发者自定义属性的符号。
AngularJS的设计是在已有的对象上添加行为。使用$做前缀的话,就能使得开发者的代码和AngularJS的代码和谐共处了。
加油!
转载于:https://www.cnblogs.com/chaojidan/p/4242144.html
AngularJS开发指南5:AngularJS表达式详解相关推荐
- AngularJS开发指南
AngularJS入门教程 AngularJS开发指南 http://docs.angularjs.org/tutorial Think in AngularJS:对比jQuery和AngularJS ...
- java lambda表达式详解_Java8新特性Lambda表达式详解
课程目标: 通过本课程的学习,详细掌握Java8新特性之Lambda表达式: 适用人群:有Java基础的开发人员: 课程概述:从Java 8出现以来lambda是最重要的特性之一,它可以让我们用简洁流 ...
- android什么控件能够输入多行文字,Android开发:文本控件详解——EditText(一)基本属性...
一.简单实例: EditText输入的文字样式部分的属性,基本都是和TextView中的属性一样. 除此之外,EditText还有自己独有的属性. 二.基本属性: hint 输入框显示的提示文本 te ...
- 家电产品出口指南,RoHs法规详解
[家电产品出口指南,RoHs法规详解] 受疫情影响,我国家电出口创新高,据海关总署发布的数据统计,2021年,中国家用电器出口额987.2亿美元,同比增长22.3%,出口规模远超历史同期水平,创近十年 ...
- C++11 并发指南三(std::mutex 详解)
上一篇<C++11 并发指南二(std::thread 详解)>中主要讲到了 std::thread 的一些用法,并给出了两个小例子,本文将介绍 std::mutex 的用法. Mutex ...
- PHP开发中常见的安全问题详解和解决方法
PHP开发中常见的安全问题详解和解决方法 参考文章: (1)PHP开发中常见的安全问题详解和解决方法 (2)https://www.cnblogs.com/walblog/articles/83313 ...
- java拉姆达表达式事例,Java Lambda表达式详解和实例
简介 Lambda表达式是Java SE 8中一个重要的新特性.lambda表达式允许你通过表达式来代替功能接口. lambda表达式就和方法一样,它提供了一个正常的参数列表和一个使用这些参数的主体( ...
- 【转】C++11 并发指南五(std::condition_variable 详解)
http://www.cnblogs.com/haippy/p/3252041.html 前面三讲<C++11 并发指南二(std::thread 详解)>,<C++11 并发指南三 ...
- cron表达式详解 Elastic-Job名次解释
#1.cron:cron表达式,用于配置作业触发时间 #2.shardingTotalCount:作业分片总数 #3.shardingItemParameters:分片序列号和参数用等号分隔,多个键值 ...
- C++11 并发指南六(atomic 类型详解四 C 风格原子操作介绍)
前面三篇文章<C++11 并发指南六(atomic 类型详解一 atomic_flag 介绍)>.<C++11 并发指南六( <atomic> 类型详解二 std::at ...
最新文章
- php htmlentities函数的问题
- webstorm代码行数统计_【Rust每周一库】Tokei 统计代码行数等信息的实用工具
- AS400: 对象属性Domain和State
- jQuery在线手册
- 支付宝当面付接口如何计算优惠
- 将Linux作为桌面操作系统,你准备好了吗?
- Linux top 使用技巧
- vue 父组件获取接口值传到子组件_vue 项目中 “父组件” 异步获取数据之后,传递给子组件不显示...
- 用shedlock实现分布式定时任务锁
- Spark RDD、DataFrame和DataSet的区别
- Telink zigbee射频和功耗测试的方法
- 推广那些坑,做好渠道组合拳!
- python将html转换成excel_Python将HTML格式文件中字段提取到EXCEL表的方法
- AWS S3 - 从S3下载数据
- 交通标志的检测与识别
- 微信小程序实战之天气预报
- kubernetes核心资源内容
- 华恩JAVA班第22天
- html flex上下居中,css3 flex实现div内容水平垂直居中的几种方法
- HDU 1914 The Stable Marriage Problem (稳定婚姻匹配)
热门文章
- 下载HTMLTestRunner如何使用
- Java+Selenium3.0----------启动谷歌浏览器及错误处理
- python spyder跑出的数据部分有些不变是怎么回事_解决Python spyder显示不全df列和行的问题...
- 安卓学习笔记18:常用控件 - 按钮、图像视图和图像按钮
- 数据库笔记07:实施数据完整性
- 12.混淆——混叠图像,对比敏感度,图像压缩_4
- mysqld占用mysql端口_IDEA连接不上MySQL端口号占用的解决
- ppt 2 html工具,PPTools PPT2HTML
- python epoll 写数据到数据库_Python--day40(EPOLL的使用、数据库基础)
- 【英语学习】【Daily English】U03 Leisure Time L01 Did you have a nice weekend?