AngularJS快速入门指南03:表达式

  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表达式支持过滤器。

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/361950.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践

ArkTS开发实践&#xff1a; 接着上一次零基础快速上手HarmonyOS ArkTS开发1---运行Hello World、ArkTS开发语言介绍继续&#xff0c; 在上一次对于ArkTS的基础知识进行了学习&#xff0c;依照官方的课程计划&#xff0c;还有两个具体的小案例需要来实践实践&#xff1a; 实践出…

无状态Spring安全性第2部分:无状态身份验证

Spring Stateless Security系列的第二部分是关于以无状态方式探索身份验证的方法。 如果您错过了CSRF的第一部分&#xff0c;可以在这里找到。 因此&#xff0c;在谈论身份验证时&#xff0c;其全部内容就是让客户端以可验证的方式向服务器标识自己。 通常&#xff0c;这始于服…

TypeScript 交叉类型(intersection type)

在TS中和联合类型(union type)对应的还有交叉类型(intersection type)。 交叉类型的出现主要为了组合多个对象类型(object type)&#xff0c;因为相对于interface&#xff0c;object type没法继承&#xff0c;那么就可以通过union type来实现混合的目的&#xff0c;从而实现继承…

【转】JAVA中的转义字符

JAVA中转义字符&#xff1a; 1.八进制转义序列&#xff1a;\ 1到3位5数字&#xff1b;范围\000~\377 \0&#xff1a;空字符 2.Unicode转义字符&#xff1a;\u 四个十六进制数字&#xff1b;0~65535 \u0000&#xff1a;空字符 3.特殊字符&#xff1a;就3个 \"&#xff1a…

八、VueJs 填坑日记之参数传递及内容页面的开发

我们在上一篇博文中&#xff0c;渲染出来了一个列表&#xff0c;并在列表中使用了router-link标签&#xff0c;标签内的&#xff1a;to就是链接地址&#xff0c;昨天咱们是<router-link :to"/content/ i.id">这样写的&#xff0c;今天我们来完成内容页面的渲染…

为Kindeditor控件添加图片自动上传功能

Kindeditor是一款功能强大的开源在线HTML编辑器&#xff0c;支持所见即所得的编辑效果。它使用JavaScript编写&#xff0c;可以无缝地与多个不同的语言环境进行集成&#xff0c;如.NET、PHP、ASP、Java等。官方网站可以查看这里&#xff1a;http://kindeditor.net/index.php Ki…

TypeScript类型推论(Type Inference)

要完全理解类型推论需要完整理解类型上下文&#xff0c;并且理解TS对于是否可以使用类型推论是基于静态分析完成的。 上下文类型应用在许多地方。常见的例子包括函数调用的参数&#xff0c;赋值的右手端位置&#xff0c;类型断言&#xff0c;对象和数组的成员&#xff0c;和返回…

4个万无一失的技巧让您开始使用JBoss BRMS 6.0.3

上周&#xff0c;红帽发布了标记为6.0.3的JBoss BRMS的下一版本&#xff0c;已订阅的用户可以在其客户门户中使用。 如果您对该版本的新增功能感到好奇&#xff0c;请在客户门户网站上在线查看版本说明和其余文档 。 我们正在寻找一些简单的方法来开始使用此新版本&#xff0…

统一命名规则

1. #define 保护 所有头文件都应该使用 #define 防止头文件被多重包含, 命名格式当是:<PROJECT>_<PATH>_<FILE>_H_ 项目 SkinTK中的头文件 SkinTK/SkinTK/targetver.h 可按如下方式保护: #ifndef SKINTK_SKINTK_TARGETVER_H_ #define SKINTK_SKINTK_TARGETVE…

中国移动MM7 API用户手册(七)

4.4 VASP接收状态报告&#xff08;上行业务&#xff09;当VASP在发送MM7SubmitReq给MMSC时设置需要发送状态报告的请求为true时&#xff0c;MMSC在收到MM7SubmitReq后&#xff0c;会发送状态报告给VASP&#xff0c;此时VASP可以进行接收。接收方式和接收传送消息一样&#xff…

如何仅通过CSS实现多行文本超长自动省略号

在CSS中&#xff0c;我们可以通过下面的样式实现DIV元素中文本超长后自动截断并以省略号结尾&#xff1a; overflow: hidden;word-break: normal;text-overflow: ellipsis; text-overflow: ellipsis是实现文本截断后以省略号结尾的关键样式&#xff0c;但问题是如果添加该样式则…

带有Angular JS的Java EE 7 – CRUD,REST,验证–第2部分

这是Angular JS承诺的Java EE 7的后续版本–第1部分 。 花了比我预期更长的时间&#xff08;找到时间来准备代码和博客文章&#xff09;&#xff0c;但是终于到了&#xff01; 应用程序 第1部分中的原始应用程序只是带有分页的简单列表&#xff0c;以及提供列表数据的REST服务…

Chrome不显示OPTIONS请求的解决方法2021版chrome90

在chrome90上之前展示跨域请求预检请求的方法失效了&#xff1a; 在chrome地址栏总输入 chrome://flags/#out-of-blink-cors 将其设置为Disabled后重启浏览器 在chrome://flags找不到选项out-of-blink-cors。取而代之的是chrome将预检请求放到了控制台网络面板的 OTHER 面板中。…

安装CentOs 5.5后无法显中文(中文乱码)

症状&#xff1a;在使用CentOS 系统时&#xff0c;安装的时候可能你会遇到英文的CentOS系统&#xff0c;在这中情况下安装CentOS系统时是默认安装&#xff08;即英文&#xff09;。安装完毕后&#xff0c;上网出现的却是中文乱码。 解决方法&#xff1a; 到CentOs资源网站上去找…

粗读《构建之法》后的思考和收获

利用出差的空挡&#xff0c;快速阅读了一下邹欣老师的《构建之法》一书。对我校软件工程的教学改革确实有很多值得参考的地方&#xff0c;强调实践环节和社会实际工作流程的结合&#xff0c;而不是为了实验而实验。 在阅读过程也有一些问题。 问题1&#xff1a;MSF中强调人员的…

SVG实现波浪效果

SVG实现波浪效果 svg path&#xff1a;C 贝塞尔曲线绘制波浪形状 A 绘制圆弧形 svg animate&#xff1a;制作波浪动画&#xff0c;为了波浪动画效果自然&#xff0c;设置values关键点       attributeName&#xff1a;变化属性名 dur&#xff1a;动画时间 repeatCount&a…

允许同站跨域Nginx配置方案

基于目前前后端分离的趋势和微前端解决方案&#xff0c;并且很多web服务部署在Nginx服务器上&#xff0c;那么因为前后端分离导致的跨域问题需要迫切得到解决。因为是否允许跨域的因素有协议、域名、端口&#xff0c;只要有一个不一致就算跨域。大部分需求要求一个一级域名下所…

使用WildFly 8在Java EE7中自举Apache Camel

从Camel版本2.10开始&#xff0c;支持CDI&#xff08;JSR-299&#xff09;和DI&#xff08;JSR-330&#xff09;。 这为在Java EE容器中以及独立Java SE或CDI容器中开发和部署Apache Camel项目提供了新的机会。 是时候尝试一下并熟悉它了。 骆驼到底是什么&#xff1f; 骆驼是…

Larbin源代码分析[6]LARBIN中线程处理类

一 线程类 larbin下的线程操作类&#xff0c;主要在mypthread.h中定义&#xff0c;实质上是利用宏定义&#xff0c;封装了pthread.h中的系统调用。 一个进程可以有多个线程&#xff0c;每个线程都有自己的处理流程。 二 具体实现 typedef void* (*StartFun) (void *); void sta…

好东西要分享

目录 矢量图标库$\text{pic}$图论神器$\text{bzoj}$离线题库打字速度表情包PPP矢量图标库 个人jio的这个阿里巴巴矢量图标库蛮不错的 上面这张就是去上面的网站找的。 $\text{pic}$ 来wallpaper abyss找点好康的图片吧。 图论神器 画图 $\text{bzoj}$离线题库 $\text{bzoj}$离线…