AngularJS之表达式
Posted 王甘林--小小菜鸟
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AngularJS之表达式相关的知识,希望对你有一定的参考价值。
1. AngularJS使用表达式把数据绑定到html。
2. AngularJS表达式的特点:
- 表达式写在双大括号内:{{表达式}}。
- 表达式把数据绑定到HTML,这与ng-bind指令有异曲同工之妙。
- 在表达式书写的位置输出数据。
- AngularJS表达式很像javascript表达式,它们可以包含文字、运算符和变量。
3. 第一个AngularJS表达式:要注意的是如果我们只导入了angular.js文件,但是没有使用ng-app这个指令,那么{{}}里面的表达式是没有效果的,页面上会把这是我的第一个AngularJS表达式:{{5+5}}这个整体显示。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/angular.min.js" ></script> </head> <body ng-app=""> <p>这是我的第一个AngularJS表达式:{{5+5}}</p> </body> </html>
4. AngularJS表达式中的数字:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/angular.min.js" ></script> </head> <body ng-app=""> <div ng-init="quantity=1;cost=5"></div> <p>总价:{{quantity*cost}}</p> </body> </html>
5. AngularJS表达式中的字符串:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/angular.min.js" ></script> </head> <body ng-app=""> <div ng-init="firstname=\'王\';lastname=\'甘林\'"></div> <p>姓名:{{firstname+lastname}}</p> </body> </html>
6. AngularJS表达式中的对象:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/angular.min.js"></script> </head> <body ng-app=""> <div ng-init="person={firstName:\'王\',lastName:\'甘林\'}"> <p>名为:{{ person.lastName }}</p> </div> </body> </html>
7. AngularJS表达式中的数组:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/angular.min.js"></script> </head> <body ng-app=""> <div ng-init="points=[1,3,5,7,9]"> <p>第三个值为:{{ points[2] }}</p> </div> </body> </html>
8. AngularJS表达式与javascript表达式的区别:
- 与 JavaScript 表达式不同,AngularJS 表达式可以写在 HTML 中。
- 与 JavaScript 表达式不同,AngularJS 表达式不支持条件判断,循环及异常。
- 与 JavaScript 表达式不同,AngularJS 表达式支持过滤器。
以上是关于AngularJS之表达式的主要内容,如果未能解决你的问题,请参考以下文章