AngularJS快速入门指南03:表达式
AngularJS通过表达式将数据绑定到HTML。
AngularJS表达式
AngularJS表达式写在双大括号中:{{ 表达式语句 }}。
AngularJS表达式绑定数据到HTML的方式与ng-bind指令的方式相同。
AngularJS会准确地将表达式“输出”为计算的结果。
AngularJS表达式与JavaScript表达式有许多相似之处,它们都包含文字、运算符和变量。例如{{ 5 + 5 }}和{{ firstName + " " + lastName }}
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body> <div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
如果你去掉ng-app指令,表达式会被直接显示在页面上而不会被计算。
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body> <div>
<p>My first expression: {{ 5 + 5 }}</p>
</div> </body>
</html>
AngularJS数字
AngularJS数字和JavaScript数字一样:
<div ng-app="" ng-init="quantity=1;cost=5"> <p>Total in dollar: {{ quantity * cost }}</p> </div>
同样,我们可以使用ng-bind指令达到相同的效果:
<div ng-app="" ng-init="quantity=1;cost=5"> <p>Total in dollar: <span ng-bind="quantity * cost"></span></p> </div>
使用ng-init指令在AngularJS开发中非常普遍。在控制器一节中你将会看到更好的初始化数据的方法。 |
AngularJS字符串
AngularJS字符串与JavaScript字符串一样:
<div ng-app="" ng-init="firstName='John';lastName='Doe'"> <p>The name is {{ firstName + " " + lastName }}</p> </div>
同样,我们可以使用ng-bind指令达到相同的效果:
<div ng-app="" ng-init="firstName='John';lastName='Doe'"> <p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p> </div>
AngularJS对象
AngularJS对象与JavaScript对象一样:
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"> <p>The name is {{ person.lastName }}</p> </div>
同样,我们可以使用ng-bind指令达到相同的效果:
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"> <p>The name is <span ng-bind="person.lastName"></span></p> </div>
AngularJS数组
AngularJS数组与JavaScript数组一样:
<div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>The third result is {{ points[2] }}</p> </div>
同样,我们可以使用ng-bind指令达到相同的效果:
<div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>The third result is <span ng-bind="points[2]"></span></p> </div>
AngularJS表达式与JavaScript表达式比较
与JavaScript表达式相同,AngularJS表达式也包含文字、运算符和变量。与JavaScript表达式不同的是,
- AngularJS表达式可以写在HTML里面。
- AngularJS表达式不支持条件和循环语句,而且没有exception语句。
- AngularJS表达式支持过滤器。
AngularJS快速入门指南03:表达式的更多相关文章
- AngularJS快速入门指南04:指令
AngularJS通过指令将HTML属性进行了扩展. AngularJS指令 AngularJS指令是带有ng-前缀的扩展HTML属性. ng-app指令用来初始化AngularJS applicat ...
- AngularJS快速入门指南01:导言
AngularJS使用新的attributes扩展了HTML AngularJS对单页面应用的支持非常好(SPAs) AngularJS非常容易学习 现在就开始学习AngularJS吧! 关于本指南 ...
- AngularJS快速入门指南02:介绍
AngularJS是一个JavaScript框架.它可以通过<script>标记被添加到HTML页面中. AngularJS通过指令对HTML属性进行了扩展,然后通过表达式将数据绑定到HT ...
- AngularJS快速入门指南20:快速参考
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
- AngularJS快速入门指南19:示例代码
本文给出的大部分示例都可以直接运行,通过点击运行按钮来查看结果,同时支持在线编辑代码. <div ng-app=""> <p>Name: <input ...
- AngularJS快速入门指南10:DOM节点
AngularJS通过指令将application数据绑定到HTML DOM元素的属性上. ng-disabled指令 ng-disabled指令将AngularJS application数据绑定到 ...
- AngularJS快速入门指南06:过滤器
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
- AngularJS快速入门指南18:Application
是时候创建一个真正的AngularJS单页面应用程序了(SPA). 一个AngularJS应用程序示例 你已经了解了足够多的内容来创建第一个AngularJS应用程序: My Note Save Cl ...
- AngularJS快速入门指南17:Includes
使用AngularJS,你可以在HTML中包含其它的HTML文件. 在HTML中包含其它HTML文件? 当前的HTML文档还不支持该功能.不过W3C建议在后续的HTML版本中增加HTML import ...
随机推荐
- iOS相关思考题
1.iOS如何应对APP版本升级,数据结构随之变化? 一般程序app升级时,数据库有可能发生改变,如增加表字段,增加表等. 此时有两种操作: 1 就是毫无留情的把本地旧数据库直接删掉,重新建立新的数据 ...
- webform注册和Repeater
一.注册1.日期(1)年月日用三DropDownList个,分别循环写入数字 代码写在后台 Page_Load中的代码 if (IsPostBack == false) { //年绑定数据 ; i- ...
- iOS /* */多个嵌套解决
解决办法 #if 0 /* */ #endif
- cms替换主页的步骤
cms替换主页的步骤 .先做好静态页面: .在D:\wamp\www\phpcms\install_package\phpcms\templates文件夹下建新的文件夹tianqiwangluo(项目 ...
- python中的system函数与编码
在调用os.system执行命令时,发现system不能接受unicode的命令.那么命令中却又包含以unicode表示的中文等字符怎么办? ——方法就是将unicode转化为utf8 path = ...
- create file遇到操作系统错误5拒绝访问
create file遇到操作系统错误5拒绝访问当用C#程序执行SQL创建一个数据库时出现错误:CREATE FILE 遇到操作系统错误 5(拒绝访问. 原因及解决方法如下:这是因为SQL Serve ...
- CSS3--背景颜色的渐变效果
一.渐变:gradients 线性渐变(linear gradients) background:-webkit-linear-gradient(90deg,red 10%,blue); 1.需要有内 ...
- ArcGIS删除部分数据后全图范围不正确
我有一个全国地图的图层,现在删除图层中其他省份,只保留山东省的图形,但是点击全图后,全图范围仍然是全国地图时候的全图范围,使用的版本是ArcGIS9.3,数据存放在9.3的个人数据库中(Perso ...
- linux中时间的更改
# tzselectPlease identify a location so that time zone rules can be set correctly.Please select a co ...
- css2选择器
CSS1&2元素选择器 选择符 类型 版本 简介 * 通配选择符 CSS2 所有元素对象. E 类型(HTML)选择符 CSS1 以文档语言对象类型作为选择符. E#myid id选择符 ...