AngularJS基础学习笔记之表达式


Posted in Javascript onMay 10, 2015

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>

Note 使用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表达式支持过滤器。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
js页面跳转常用的几种方式
Nov 25 Javascript
jQuery对表单的操作代码集合
Apr 06 Javascript
浅析Cookie中的Path与domain
Dec 18 Javascript
JQuery打造省市下拉框联动效果
May 18 Javascript
jQuery打印图片pdf、txt示例代码
Jul 22 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
Aug 04 Javascript
JavaScript的Date()方法使用详解
Jun 09 Javascript
浅谈Node.js:fs文件系统模块
Dec 08 Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
Dec 16 Javascript
使用vux实现上拉刷新功能遇到的坑
Feb 08 Javascript
uniapp实现横向滚动选择日期
Oct 21 Javascript
AngularJS基础学习笔记之简单介绍
May 10 #Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 #Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 #Javascript
深入浅出分析javaScript中this用法
May 09 #Javascript
深入浅出理解javaScript原型链
May 09 #Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
May 09 #Javascript
JS动画效果打开、关闭层的实现方法
May 09 #Javascript
You might like
discuz安全提问算法
2007/06/06 PHP
php+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
Javascript 表单之间的数据传递代码
2008/12/04 Javascript
js跑马灯代码(自写)
2013/04/17 Javascript
探讨javascript是不是面向对象的语言
2013/11/21 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
AngularJs中route的使用方法和配置
2016/02/04 Javascript
javascript常见数字进制转换实例分析
2016/04/21 Javascript
基于jQuery制作小图标上下滑动特效
2017/01/18 Javascript
Vue实例简单方法介绍
2017/01/20 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
js鼠标跟随运动效果
2017/03/11 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
NodeJs使用Mysql模块实现事务处理实例
2017/05/31 NodeJs
实现两个文本框同时输入的实例
2017/09/25 Javascript
深入理解ES6 Promise 扩展always方法
2017/09/26 Javascript
django使用channels2.x实现实时通讯
2018/11/28 Javascript
JavaScript ES6中的简写语法总结与使用技巧
2018/12/30 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
vue组件化中slot的基本使用方法
2019/05/01 Javascript
django js 实现表格动态标序号的实例代码
2019/07/12 Javascript
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
python同时给两个收件人发送邮件的方法
2015/04/30 Python
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
python 常见的反爬虫策略
2020/09/27 Python
布鲁明戴尔百货店:Bloomingdale’s
2016/12/21 全球购物
澳大利亚珠宝商:Shiels
2019/10/06 全球购物
怎样填写就业意向
2014/04/02 职场文书
留守儿童工作方案
2014/06/02 职场文书
迎新晚会策划方案
2014/06/13 职场文书
党员对照检查材料思想汇报(党的群众路线)
2014/09/24 职场文书
一年级语文上册复习计划
2015/01/17 职场文书
导游词之峨眉乐山/兵马俑/北京故宫御花园
2019/09/03 职场文书
六年级作文之预言作文
2019/10/25 职场文书
nginx 防盗链防爬虫配置详解
2021/03/31 Servers