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 秒表实现代码
Jul 24 Javascript
防止登录页面出现在frame中js代码
Jul 22 Javascript
IE10中flexigrid无法显示数据的解决方法
Jul 26 Javascript
JavaScript中var关键字的使用详解
Aug 14 Javascript
JS正则表达式比较常见用法
Jan 26 Javascript
JavaScript中的操作符类型转换示例总结
May 30 Javascript
jQuery 判断是否包含在数组中Array[]的方法
Aug 03 Javascript
Vue项目webpack打包部署到服务器的实例详解
Jul 17 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
VUE动态生成word的实现
Jul 26 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
Jul 29 Javascript
vue实现登陆页面开发实践
May 30 Vue.js
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
PHP rawurlencode与urlencode函数的深入分析
2013/06/08 PHP
PHP实现webshell扫描文件木马的方法
2017/07/31 PHP
jQuery 浮动广告实现代码
2008/12/25 Javascript
图片Slider 带左右按钮的js示例
2013/08/30 Javascript
JS实现OCX控件的事件响应示例
2014/09/17 Javascript
JavaScript中的null和undefined区别介绍
2015/01/01 Javascript
异步安全加载javascript文件的方法
2015/07/21 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
2015/12/29 Javascript
深入浅析JavaScript面向对象和原型函数
2016/02/06 Javascript
jQuery Mobile和HTML5开发App推广注册页
2016/11/07 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
2018/04/10 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
2019/05/16 Javascript
用Python抢过年的火车票附源码
2015/12/07 Python
Python函数的周期性执行实现方法
2016/08/13 Python
解决python "No module named pip" 的问题
2018/10/13 Python
用Django写天气预报查询网站
2018/10/21 Python
pycharm使用matplotlib.pyplot不显示图形的解决方法
2018/10/28 Python
Python自动抢红包教程详解
2019/06/11 Python
Python内建序列通用操作6种实现方法
2020/03/26 Python
python 识别登录验证码图片功能的实现代码(完整代码)
2020/07/03 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
手把手教你用纯css3实现轮播图效果实例
2017/05/04 HTML / CSS
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
加拿大品牌鞋包连锁店:Little Burgundy
2021/02/28 全球购物
原料仓管员岗位职责
2014/04/12 职场文书
小区门卫岗位职责范本
2014/08/24 职场文书
巾帼标兵事迹材料
2014/12/26 职场文书
2015年机关后勤工作总结
2015/05/26 职场文书
毕业生学校组织意见
2015/06/04 职场文书
学生病假条怎么写
2015/08/17 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书
phpQuery解析HTML乱码问题(补充官网未列出的乱码解决方案)
2021/04/01 PHP
python爬虫之selenium库的安装及使用教程
2021/05/23 Python