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 相关文章推荐
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
Jul 31 Javascript
JQuery给select添加/删除节点的实现代码
Apr 26 Javascript
浅谈AngularJs指令之scope属性详解
Oct 24 Javascript
微信小程序 页面跳转传递值几种方法详解
Jan 12 Javascript
基于jstree使用AJAX请求获取数据形成树
Aug 29 Javascript
基于Bootstrap实现城市三级联动
Nov 23 Javascript
Vue官网todoMVC示例代码
Jan 29 Javascript
Vue实现搜索结果高亮显示关键字
May 28 Javascript
解决layui表格的表头不滚动的问题
Sep 04 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
Jul 07 Javascript
OpenLayers3实现测量功能
Sep 25 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 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中global和$GLOBALS[]的分析之一
2012/02/02 PHP
php setcookie(name, value, expires, path, domain, secure) 参数详解
2013/06/28 PHP
php+lottery.js实现九宫格抽奖功能
2019/07/21 PHP
2007/12/23更新创意无限,简单实用(javascript log)
2007/12/24 Javascript
javascript 自动转到命名锚记
2009/01/10 Javascript
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
Javascript单元测试框架QUnitjs详细介绍
2014/05/08 Javascript
JS小游戏之仙剑翻牌源码详解
2014/09/25 Javascript
基于jQuery仿淘宝产品图片放大镜特效
2020/10/19 Javascript
JavaScript中Array的实用操作技巧分享
2016/09/11 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
ES6中的rest参数与扩展运算符详解
2017/07/18 Javascript
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
JS实现的自定义map方法示例
2019/05/17 Javascript
通过实例学习React中事件节流防抖
2019/06/17 Javascript
ElementUI 修改默认样式的几种办法(小结)
2020/07/29 Javascript
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
浅析Python中的多进程与多线程的使用
2015/04/07 Python
Python的gevent框架的入门教程
2015/04/29 Python
python中numpy包使用教程之数组和相关操作详解
2017/07/30 Python
对python调用RPC接口的实例详解
2019/01/03 Python
Python远程方法调用实现过程解析
2020/07/28 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
HTML5拖放效果的实现代码
2016/11/17 HTML / CSS
英国时尚运动品牌的合集:The Sports Edit
2017/12/20 全球购物
营销与策划专业求职信
2014/06/20 职场文书
学校2014重阳节活动策划方案
2014/09/16 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
六一文艺汇演开幕词
2015/01/29 职场文书
2015年反洗钱工作总结
2015/04/25 职场文书
2016年企业安全生产月活动总结
2016/04/06 职场文书
导游词之江南周庄
2019/12/06 职场文书
GO语言异常处理分析 err接口及defer延迟
2022/04/14 Golang