0

0

angularjs的表达式怎么用?angularjs的表达式的使用实例

寻∝梦

寻∝梦

发布时间:2018-09-06 16:44:49

|

1673人浏览过

|

来源于php中文网

原创

本篇文章主要的向大家讲述了关于angularjs表达式的用法和angularjs的使用实例解释,最后还有angularjs表达式与javascript表达式的区别。现在就让我们一起来看这篇文章吧

首先我们来了解下angularjs的表达式怎么用:

ng中的表达式与javascript表达式类似但是不可以划等号,它是ng自己定义的一套模式。表达式可以作为指令的值,如ng-modle=”people.name”、ng-click=”showMe()”,看起来是如此像字符串,故而也叫字符串表达式。也可以在标记中使用表达式,如{{1+2}},或者与过滤器一起使用{{1+2 | currency}}。在框架内部,字符串不会简单的使用eval()来执行,而是有一个专门的$parse服务来处理。在ng表达式中不可以使用循环语句、判断语句,事实上在模板中使用复杂的表达式也是一个不推荐的做法,这样视图与逻辑就混杂在一起了

我们在使用其他模板库时,一般都会有模板的循环输出、分支输出、逻辑判断等类似的控制。

要想理解指令属性的运作,我们必须先理解表达式。在之前的例子里我们已经见过表达式,例如 {{ user.name }}。

{{ 8 + 1 }} 9
{{ person }} {"name":"Ari Lerner"}
{{ 10 * 3.3 | currency }} $33.00

表达式粗略来看有点像 eval(javascript) 的结果。它们会经过Angular.js的处理,从而拥有以下重要而独特的性质:

所有表达式都在scope这个context里被执行,因此可以使用所有本地 $scope 中的变量。

如果一个表达式的执行导致类型错误或引用错误,这些错误将不会被抛出。

表达式里不允许任何控制函数流程的功能(如if/else等条件语句)

表达式可接受一个或多个串联起来的过滤器。(想要看更多关于angularjs的视频,就到PHP中文网AngularJS视频教程栏目学习,里面有你想要的学习视频)

现在来看看angularjs表达式的使用实例:

  • AngularJS 表达式写在双大括号内:{{ expression }}。

  • AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。

  • AngularJS 将在表达式书写的位置"输出"数据。

  • AngularJS 表达式 很像 JavaScript  表达式:它们可以包含文字、运算符和变量。

实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

一.AngularJS 数字

总价: {{ quantity * cost }}

总价:

初始化参数,并通过ng-bind\表达式绑定并运用数字公式进行计算.

二.AngularJS 字符串

这种形式依然可以用两种方式进行绑定数据:

1.表达式绑定。2.利用ng-bind进行绑定。

例如:

姓名: {{ firstName + " " + lastName }}

芝麻乐开源众筹cms系统
芝麻乐开源众筹cms系统

芝麻乐开源众筹系统采用php+mysql开发,基于MVC开发,适用于各类互联网金融公司使用,程序具备模板分离技术,您可以根据您的需要进行应用扩展来达到更加强大功能。前端使用pintuer、jquery、layer等....系统易于使用和扩展简单的安装和升级向导多重业务逻辑判断,预防出现bug后台图表数据方式,一目了然后台包含但不限于以下功能:用户认证角色管理节点管理管理员管理上传配置支付配置短信平

下载

姓名:

三.我们来看看AngularJS对象:

AngularJS 对象就像 JavaScript 对象:

两种方式绑定:

1.表达式:

姓为 {{ person.lastName }}

2.ng-bind绑定

姓为

AngularJS 数组就像 JavaScript 数组:

两种方式:

1.表达式:

第三个值为 {{ points[2] }}

2.ng-bind绑定:

第三个值为

AngularJS 表达式 与 JavaScript 表达式的区别:

  1. 类似于 JavaScript 表达式,AngularJS 表达式可以包含字母,操作符,变量。

  2. 与 JavaScript 表达式不同,AngularJS 表达式可以写在 HTML 中。

  3. 与 JavaScript 表达式不同,AngularJS 表达式不支持条件判断,循环及异常。

  4. 与 JavaScript 表达式不同,AngularJS 表达式支持过滤器。

好了,以上就是本篇关于angularjs表达式使用的文章了(想看更多就到PHP中文网,那里有AngularJS参考手册,可以供大家学习参考),希望对大家有帮助,有问题的可以在下方提问。

【小编推荐】

angularjs过滤器怎么使用?angularjs过滤器使用方法介绍

angularjs的路由原理你知道吗?这里有angularjs路由的详细原理

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

14

2026.01.30

c++ 字符串格式化
c++ 字符串格式化

本专题整合了c++字符串格式化用法、输出技巧、实践等等内容,阅读专题下面的文章了解更多详细内容。

9

2026.01.30

java 字符串格式化
java 字符串格式化

本专题整合了java如何进行字符串格式化相关教程、使用解析、方法详解等等内容。阅读专题下面的文章了解更多详细教程。

12

2026.01.30

python 字符串格式化
python 字符串格式化

本专题整合了python字符串格式化教程、实践、方法、进阶等等相关内容,阅读专题下面的文章了解更多详细操作。

4

2026.01.30

java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

20

2026.01.29

java配置环境变量教程合集
java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容,阅读专题下面的文章了解更多详细操作。

18

2026.01.29

java成品学习网站推荐大全
java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容,阅读专题下面的文章了解更多详细推荐内容。

19

2026.01.29

Java字符串处理使用教程合集
Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容,阅读专题下面的文章了解详细操作教程。

3

2026.01.29

Java空对象相关教程合集
Java空对象相关教程合集

本专题整合了Java空对象相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
CSS3 教程
CSS3 教程

共18课时 | 5万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

AngularJS教程
AngularJS教程

共24课时 | 3.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号