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 相关文章推荐
JavaScript 利用Cookie记录用户登录信息
Dec 08 Javascript
用js实现trim()的解决办法
Apr 16 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
Aug 02 Javascript
html页面显示年月日时分秒和星期几的两种方式
Aug 20 Javascript
jquery实现背景墙聚光灯效果示例分享
Mar 02 Javascript
AngularJS 日期格式化详解
Dec 23 Javascript
jQuery获取父元素及父节点的方法小结
Apr 14 Javascript
小程序云开发部署攻略(图文教程)
Oct 30 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
Sep 24 Javascript
vue基于v-charts封装双向条形图的实现代码
Dec 09 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
Jun 17 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
php实现aes加密类分享
2014/02/16 PHP
PHP时间类完整实例(非常实用)
2015/12/25 PHP
Jquery ui css framework
2010/06/28 Javascript
return false;和e.preventDefault();的区别
2010/07/11 Javascript
javascript学习基础笔记之DOM对象操作
2011/11/03 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
2014/08/22 Javascript
JavaScript变量的作用域全解析
2015/08/14 Javascript
Jquery Ajax Error 调试错误的技巧
2015/11/20 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
JavaScript图像延迟加载库Echo.js
2016/04/05 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
2017/04/06 Javascript
vue子父组件通信的实现代码
2017/07/09 Javascript
深入解析nodejs HTTP服务
2017/07/25 NodeJs
webpack 模块热替换原理
2018/04/09 Javascript
vue两个组件间值的传递或修改方式
2018/07/04 Javascript
node.js监听文件变化的实现方法
2019/04/17 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
2019/09/07 Javascript
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
前端性能优化建议
2020/09/17 Javascript
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
python中将字典转换成其json字符串
2014/07/16 Python
Python实现从URL地址提取文件名的方法
2015/05/15 Python
在python image 中实现安装中文字体
2020/05/16 Python
浅谈Selenium+Webdriver 常用的元素定位方式
2021/01/13 Python
JD Sports瑞典:英国领先的运动时尚商店
2018/01/28 全球购物
weblogic面试题
2016/03/07 面试题
一套中级Java程序员笔试题
2015/01/14 面试题
员工考核评语大全
2014/04/26 职场文书
图书室标语
2014/06/21 职场文书
2014年国庆节演讲稿精选范文1500字
2014/09/25 职场文书
2015年党风廉政建设工作总结
2015/04/09 职场文书
成事在人观后感
2015/06/16 职场文书
JavaScript中MutationObServer监听DOM元素详情
2021/11/27 Javascript