angular学习笔记(十一)-表达式
2014-05-10 11:17
211 查看
本篇只要介绍angular表达式:
在之前的例子中,我们多半是直接把数据作为angular标识符的值,但其实可以使用表达式来做更多的事情:
比如:
{{number}}
也可以是: {{number+10}} (将数据进行简单的运算)
也可以是: {{someFun()/10}} (调用方法得到结果,同时经过简单运算)
又比如:
ng-class={hight: ifHigh}
也可以是: {hight: $index%4 >= compute($index)} (调用方法,简单运算,传入参数)
以上这些仅仅是举例,表达式虽然方便,但实际中应该尽量把带有逻辑的运算放入控制器中,而不是在ui中进行.
表达式是用angular自定义的解析方式计算的,不是javascript的eval(),因此是有限的.只限用于一些基本,简单的操作,比如:
计算(+,-,*,/%)
比较(==,!=,<,>,>=,<=)
布尔逻辑(&&,||,!)
数组和对象([],{})
调用方法,传入参数(fun(i))
不能够使用:
++,--,if,else,throw,for,while,...
表达式最大的有点在于,能够兼容undefined和null,不会报错,而是简单的不渲染任何内容.而一旦它被赋值了,就会立刻显示正确的内容
在之前的例子中,我们多半是直接把数据作为angular标识符的值,但其实可以使用表达式来做更多的事情:
比如:
{{number}}
也可以是: {{number+10}} (将数据进行简单的运算)
也可以是: {{someFun()/10}} (调用方法得到结果,同时经过简单运算)
又比如:
ng-class={hight: ifHigh}
也可以是: {hight: $index%4 >= compute($index)} (调用方法,简单运算,传入参数)
以上这些仅仅是举例,表达式虽然方便,但实际中应该尽量把带有逻辑的运算放入控制器中,而不是在ui中进行.
表达式是用angular自定义的解析方式计算的,不是javascript的eval(),因此是有限的.只限用于一些基本,简单的操作,比如:
计算(+,-,*,/%)
比较(==,!=,<,>,>=,<=)
布尔逻辑(&&,||,!)
数组和对象([],{})
调用方法,传入参数(fun(i))
不能够使用:
++,--,if,else,throw,for,while,...
表达式最大的有点在于,能够兼容undefined和null,不会报错,而是简单的不渲染任何内容.而一旦它被赋值了,就会立刻显示正确的内容
相关文章推荐
- javascript学习笔记(十一) 正则表达式介绍
- javascript学习笔记(十一) 正则表达式
- Python学习笔记57(正则表达式)
- angular学习笔记【ng2-charts】插件添加
- MonoRail学习笔记十一:页面控件的填充和验证
- AngularJS学习笔记--使用angular.extend()实现工厂模式
- PHP学习笔记【9】_表达式
- JS 正则表达式的相关方法(正则学习笔记1)
- MySQL学习笔记十一:数据导入与导出
- Linux 学习笔记 -- 第三部分 学习 shell 与 shell script -- 第12章 正则表达式与文件格式化处理
- JAVA学习笔记(十一)连接数据库
- 正则表达式学习笔记之POSIX
- Angular.js学习笔记 (二)
- Angular 1 学习笔记二
- angular学习笔记一
- [学习笔记]批次需求计划-十一大量
- C++的学习笔记(第二章:基本数据类型与表达式)
- Python学习笔记<正则表达式与python>
- JAVASCRIPT学习笔记之正则表达式
- Spring 学习笔记(七)—— 切入点表达式