AngularJS表达式

AngularJS 使用 表达式 把数据绑定到 HTML。

AngularJS 表达式

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body><div ng-app>
<p>我的第一个表达式: {{ 5 + 5 }}</p>
</div></body>
</html>

使用 ng-init 不是很常见。您将在控制器一章中学习到一个更好的初始化数据的方式。

AngularJS 数字

AngularJS 数字就像 JavaScript 数字:

<div ng-app="" ng-init="quantity=1;cost=5"> <p>总价: {{ quantity * cost }}</p> </div>

使用 ng-bind 的相同实例:

<div ng-app="" ng-init="quantity=1;cost=5"> <p>总价: <span ng-bind="quantity * cost"></span></p> </div>

AngularJS 字符串

AngularJS 字符串就像 JavaScript 字符串:

<div ng-app="" ng-init="firstName='John';lastName='Doe'"> <p>姓名: {{ firstName + " " + lastName }}</p> </div>

使用 ng-bind 的相同实例:

<div ng-app="" ng-init="firstName='John';lastName='Doe'"> <p>姓名: <span ng-bind="firstName + ' ' + lastName"></span></p> </div>

AngularJS 对象就像 JavaScript 对象:

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"> <p>姓为 {{ person.lastName }}</p> </div>

使用 ng-bind 的相同实例:

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"> <p>姓为 <span ng-bind="person.lastName"></span></p> </div>

AngularJS 数组

AngularJS 数组就像 JavaScript 数组:

<div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>第三个值为 {{ points[2] }}</p> </div>

使用 ng-bind 的相同实例:

<div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>第三个值为 <span ng-bind="points[2]"></span></p> </div>

AngularJS 表达式 与 JavaScript 表达式

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

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

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

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

笔记 

1.ng-app是一个特殊的指令,一个HTML文档只出现一次,如出现多次也只有第一个起作用;ng-app可以出现在html文档的任何一个元素上。

2.ng-app作用:告诉子元素指令是属于angularJs。

3.ng-app的值可以为空(练习),项目中一定要赋值,后面所说的模块。

一个页面里创建多个 ng-app 手动加载即可:

var app1 = angular.module("app1", []); //自动加载var app2 = angular.module("app2", []); //手动加载
angular.bootstrap(document.getElementById("A2"), ['app2']); // 手动加载2

若不成功: 

// 页面加载完成后,再加载模块
angular.element(document).ready(function() {
//手动加载myApp2 ng-app
angular.bootstrap(document.getElementById("myApp2"), ['myApp2'])
}) 

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

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

相关文章

html文件Js写输入框和弹框调接口jQuery

业务场景&#xff1a;需要使用写一个html文件&#xff0c;实现输入数字&#xff0c;保存调接口。 1、使用 JS原生写法&#xff0c; fetchAPI调接口&#xff0c;使用 alert 方法弹框会阻塞线程&#xff0c;所以写了一个弹框。 <!DOCTYPE html> <html lang"en"…

Linux文件的扩展属性 attr cap

文件属性 Linux文件属性分为常规属性与扩展属性&#xff0c;其中扩展属性有两种&#xff1a;attr与xattr. 一般常规的文件属性由stat API 读取&#xff0c;一般是三种权限&#xff0c;ower, group&#xff0c;时间等。 扩展属性attr 用户态API ioctl(fd, FS_IOC32_SETFLAGS…

前端性能优化 将资源放到 linux 服务器上 提升访问效率

我们先远端连接服务器 然后服务器终端输入 mkdir 目录路径建出一个新的文件路径 回到我们自己的电脑 然后 在要缓存到服务器的文件目录下打开终端 输入 scp -r ./xidis.hdr 用户名 如果没设置用户名就是root服务器公网IP:/root/xhdr例如 scp -r ./xidis.hdr root1.113.266…

链表的一些典型问题

求链表的中间节点/倒数第K个节点 等类似的随机访问&#xff0c;可以考虑用快慢指针 例 求链表的中间节点 可以定义两个指针&#xff0c;一个一次走两步一个一次走一步&#xff0c;当走的快的走到NULL时&#xff0c;走的慢的就是链表的中间节点。&#xff08;此法求出的偶数个…

数据之光:乡镇企业的发展利器——数据可视化

数据可视化是一项强大的工具&#xff0c;它不仅在大型企业中发挥关键作用&#xff0c;而且在乡镇企业中也能作出显著贡献。那么&#xff0c;数据可视化究竟能为乡镇企业做出什么样的贡献呢&#xff1f; 首先&#xff0c;数据可视化为乡镇企业提供了更清晰的业务洞察。通过将庞大…

Vue.js学习笔记(1)——Visual Studio Code搭建Vue.js框架

1 安装Node.js 1、下载安装包&#xff1a;进入官网&#xff08;https://nodejs.org/en&#xff09;&#xff0c;下载左侧的稳定版。 2、选择安装位置&#xff0c;不用勾选自动安装必要工具。 其他都默认Next。 配置环境&#xff0c;具体参考本文章&#xff1a; https://blo…

【PHP】函数strpos():判断一个字符串是否包含另一个字符串

strpos 是 PHP 中的一个字符串函数&#xff0c;用于查找一个字符串在另一个字符串中首次出现的位置。如果找到了匹配的字符串&#xff0c;strpos 函数会返回匹配的第一个字符的索引值&#xff08;从 0 开始&#xff09;&#xff0c;否则返回 false。 函数原型&#xff1a; in…

移动端手签-图片base64旋转功能

记录一个方法用于移动端横屏画布的旋转图片功能。 核心代码&#xff1a; rotateBase64(data) {return new Promise((resolve) > {const imgView new Image();imgView.src data;const canvas document.createElement(canvas);const context canvas.getContext(2d);const …

大语言模型(LLM)框架及微调 (Fine Tuning)

大语言模型&#xff08;LLM&#xff09; 技术作为人工智能领域的一项重要创 新在今年引起了广泛的关注。 LLM 是利用深度学习和大数据训练的人工智能系统&#xff0c;专门 设计来理解、生成和回应自然语言。这些模型通过分析大量 的文本数据来学习语言的结构和用法&#xff0c;…

【网络安全】全网最全的渗透测试介绍(超详细)

渗透测试介绍 渗透测试就是模拟攻击者入侵系统&#xff0c;对系统进行一步步地渗透&#xff0c;发现系统地脆弱环节和隐藏风险。最后形成测试报告提供给系统所有者。系统所有者可根据该测试报告对系统进行加固&#xff0c;提升系统的安全性&#xff0c;防止真正的攻击者入侵。…

【Unity】【FBX】如何将FBX模型导入Unity

【背景】 网上能够找到不少不错的FBX模型资源&#xff0c;大大加速游戏开发时间。如何将这些FBX导入Unity呢&#xff1f; 【步骤】 打开Unity项目文件&#xff0c;进入场景。 点击Projects面板&#xff0c;右键选择Import New Assets 选中FBX文件后导入。Assets文件夹中就会…

【网络安全】upload靶场pass1-10思路

目录 Pass-1 Pass-2 Pass-3 Pass-4 Pass-5 Pass-6 Pass-7 Pass-8 Pass-9 Pass-10 &#x1f308;嗨&#xff01;我是Filotimo__&#x1f308;。很高兴与大家相识&#xff0c;希望我的博客能对你有所帮助。 &#x1f4a1;本文由Filotimo__✍️原创&#xff0c;首发于CSDN&#x1…

求解拍频的信号特征

这张图上&#xff0c;时域已经明显产生调幅波的拍频特征。利用宏观的拍频特征可以肉眼识读两个信号的频差&#xff1a; 一秒是69.42个像素。拍频周期是&#xff1a;21.857像素。所以&#xff0c;拍频的周期是&#xff1a;3.7161Hz. 其中一个频率是50Hz&#xff0c;另一个频率…

C# Winform教程(二):基础窗口程序

1、介绍 winform应用程序是一种智能客户端技术&#xff0c;我们可以使用winform应用程序帮助我们获得信息或者传输信息等。 2、常用属性 Name&#xff1a;在后台要获得前台的控件对象&#xff0c;需要使用Name属性。 Visible&#xff1a;指示一个控件是否可见、 Enable&…

验证 Mixtral-8x7B-Instruct-v0.1 和 LangChain SQLDatabaseToolkit 的集成效果

验证 Mixtral-8x7B-Instruct-v0.1 和 LangChain SQLDatabaseToolkit 的集成效果 0. 背景1. 验证环境说明2. 验证开始2-1. 准备测试数据库2-2. 读取环境配置信息2-3. 导入依赖包2-3. 创建 SQLDatabaseToolkit 对象和 AgentExecutor 对象2-4. 第1个测试 - 描述一个表2-5. 第2个测…

算法训练第五十三天|1143. 最长公共子序列、1035. 不相交的线、53. 最大子数组和

1143. 最长公共子序列&#xff1a; 题目链接 给定两个字符串 text1 和 text2&#xff0c;返回这两个字符串的最长 公共子序列 的长度。如果不存在 公共子序列 &#xff0c;返回 0 。 一个字符串的 子序列 是指这样一个新的字符串&#xff1a;它是由原字符串在不改变字符的相对…

OpenStack优缺点并与CloudStack的比较

文章目录 OpenStack的优势&#xff1a;OpenStack的缺陷&#xff1a;OpenStack和CloudStack OpenStack的优势&#xff1a; 控制性&#xff1a; OpenStack是一个开源平台&#xff0c;不会受到特定厂商的绑定和限制。其模块化设计使其能够集成遗留和第三方技术&#xff0c;满足不同…

手机怎么下载python并安装,如何在手机上下载python

大家好&#xff0c;小编来为大家解答以下问题&#xff0c;如何在手机上下载python 3.7版本&#xff0c;手机怎么下载python并安装&#xff0c;现在让我们一起来看看吧&#xff01; 如何在手机上下载python 应用市场内搜索下载下载Python在您开始之前&#xff0c;在你的计算机将…

JS之日期对象Date

让我为大家介绍一下日期对象吧&#xff01; 日期对象&#xff0c;用来表示时间的对象 1.获取当前时间 // 获取当前时间let date new Date()2.指定时间 // 指定时间let date new Date("2023-6-1 08:30:30")日期对象的方法 因为我们日期对象返回的数据我们不能直接使…