AngularJS 表达式详细讲解及实例代码
AngularJS 表达式
AngularJS 使用 表达式 把数据绑定到 HTML。
AngularJS 表达式写在双大括号内： {{ expression }} 。
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
实例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app>
<p>我的第一个表达式: {{ 5 + 5 }}</p>
</div>
</body>
</html>
运行结果：
我的第一个表达式: 10
AngularJS 数字
AngularJS 数字就像 JavaScript 数字：
实例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="quantity=1;cost=5">
<p>总价: {{ quantity * cost }}</p>
</div>
</body>
</html>
运行结果：
总价：5
使用 ng-bind 的相同实例：
实例代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="" ng-init="quantity=1;cost=5"> <p>总价: <span ng-bind="quantity * cost"></span></p> </div> </body> </html>
运行结果：
总价：5
注意：使用 ng-init 不是很常见。您将在控制器一章中学习到一个更好的初始化数据的方式。
AngularJS 字符串
AngularJS 字符串就像 JavaScript 字符串：
实例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>姓名: {{ firstName + " " + lastName }}</p>
</div>
</body>
</html>
运行结果：
姓名：John Doe
使用 ng-bind 的相同实例：
实例代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="" ng-init="firstName='John';lastName='Doe'"> <p>姓名: <span ng-bind="firstName + ' ' + lastName"></span></p> </div> </body> </html>
运行结果：
姓名：John Doe
AngularJS 对象
AngularJS 对象就像 JavaScript 对象：
实例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓为 {{ person.lastName }}</p>
</div>
</body>
</html>
运行结果：
姓名为 Doe
使用 ng-bind 的相同实例：
实例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓为 <span ng-bind="person.lastName"></span></p>
</div>
</body>
</html>
运行结果：
姓名为 Doe
AngularJS 数组
AngularJS 数组就像 JavaScript 数组：
实例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三个值为 {{ points[2] }}</p>
</div>
</body>
</html>
运行结果：
第三个值为 19
使用 ng-bind 的相同实例：
实例代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>第三个值为 <span ng-bind="points[2]"></span></p> </div> </body> </html>
运行结果：
第三个值为 19
AngularJS 表达式 与 JavaScript 表达式
类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。
与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。
与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。
与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。
以上就是对AngularJS 表达式资料的整理，后续继续补充，希望能帮助学习AngularJS 的同学。
相关文章
这篇文章主要为大家介绍了JavaScript对象管家Proxy使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
js 交互在Flutter 中使用 webview_flutter
这篇文章主要为大家介绍了js 交互在Flutter 中使用 webview_flutter示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要介绍了微信小程序 摇一摇抽奖简单实例实现代码的相关资料,这里实现摇一摇抽奖的功能，需要的朋友可以参考下2017-01-01
ant-design的upload组件中实现粘贴上传实例详解
这篇文章主要为大家介绍了ant-design的upload组件中实现粘贴上传实例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要介绍了微信小程序template模板使用的相关资料,希望通过本文能帮助到大家，让大家理解掌握这样的功能，需要的朋友可以参考下2017-10-10
这篇文章主要介绍了微信小程序 高德地图详解及简单实例（源码下载）的相关资料,需要的朋友可以参考下2017-01-01
这篇文章主要为大家介绍了Web项目如何配置Eslint过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
这篇文章主要介绍了JavaScript文档对象模型DOM，当网页被加载时，浏览器会创建页面的文档对象模型，通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。下面来看看文章得详细内容,需要的朋友可以参考一下2021-11-11
这篇文章主要为大家介绍了js中yield参数应用示例深入理解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
本文主要讲解Google 地图事件,这里整理了Google地图基本事件功能，并提供代码示例以供大家参考，有需要的小伙伴可以参考下2016-08-08
最新评论