AngularJS 表达式
1. AngularJS使用表达式把数据绑定到HTML。
2. AngularJS表达式的特点:
- 表达式写在双大括号内:{{表达式}}。
- 表达式把数据绑定到HTML,这与ng-bind指令有异曲同工之妙。
- 在表达式书写的位置输出数据。
- AngularJS表达式很像javascript表达式,它们可以包含文字、运算符和变量。
3. 第一个AngularJS表达式:要注意的是如果我们只导入了angular.js文件,但是没有使用ng-app这个指令,那么{{}}里面的表达式是没有效果的,页面上会把这是我的第一个AngularJS表达式:{{5+5}}这个整体显示。
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/angular.min.js" ></script></head><body ng-app=""><p>这是我的第一个AngularJS表达式:{{5+5}}</p></body> </html>
4. AngularJS表达式中的数字:
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/angular.min.js" ></script></head><body ng-app=""><div ng-init="quantity=1;cost=5"></div><p>总价:{{quantity*cost}}</p></body> </html>
5. AngularJS表达式中的字符串:
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/angular.min.js" ></script></head><body ng-app=""><div ng-init="firstname='王';lastname='甘林'"></div><p>姓名:{{firstname+lastname}}</p></body> </html>
6. AngularJS表达式中的对象:
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/angular.min.js"></script></head><body ng-app=""><div ng-init="person={firstName:'王',lastName:'甘林'}"><p>名为:{{ person.lastName }}</p></div></body> </html>
7. AngularJS表达式中的数组:
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/angular.min.js"></script></head><body ng-app=""><div ng-init="points=[1,3,5,7,9]"><p>第三个值为:{{ points[2] }}</p></div></body> </html>
8. AngularJS表达式与javascript表达式的区别:
- 与 JavaScript 表达式不同,AngularJS 表达式可以写在 HTML 中。
- 与 JavaScript 表达式不同,AngularJS 表达式不支持条件判断,循环及异常。
- 与 JavaScript 表达式不同,AngularJS 表达式支持过滤器。
转载于:https://www.cnblogs.com/wgl1995/p/6255748.html
AngularJS 表达式相关推荐
- 【04】AngularJS 表达式
AngularJS 表达式 AngularJS 使用 表达式 把数据绑定到 HTML. AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. Ang ...
- AngularJS开发指南5:AngularJS表达式详解
AngularJS表达式类似Javascript的代码片段,通常在数据绑定中用到,写在双大括号中,如:{{表达式}}.表达式是用$parse方法来处理的. 下面是一些合法的AngularJS表达式 1 ...
- angularJS表达式详解!
angularJS的表达式很像Javascript里的表达式:它可以包含文字,运算符和变量: angularJS 表达式: - 数字:{{100+100}} - 字符串:{{'hello'+'angu ...
- AngularJS 学习笔记---AngularJS 表达式
AngularJS 表达式 AngularJS 使用 表达式 把数据绑定到 HTML. AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. Ang ...
- AngularJS:表达式
ylbtech-AngularJS:表达式 1.返回顶部 1. AngularJS 表达式 AngularJS 使用 表达式 把数据绑定到 HTML. AngularJS 表达式 AngularJS ...
- AngularJS快速入门指南03:表达式
AngularJS通过表达式将数据绑定到HTML. AngularJS表达式 AngularJS表达式写在双大括号中:{{ 表达式语句 }}. AngularJS表达式绑定数据到HTML的方式与ng- ...
- AngularJS中的表达式
AngularJS表达式 (AngularJS Expressions) In AngularJS, expressions are solved to give a result. It outpu ...
- AngularJS安装配置与基础概要整理(上)
以前整理的,可供参考. 安装: 1.首先要安装node.js和它的npm包管理系统.(nodejs相关待整理) 2.安装grunt .grunt是一个基于任务的Javascript工程命令行构建工具. ...
- 一款优秀的JavaScript框架—AngularJS
AngularJS简介 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angular ...
最新文章
- 学习UI设计的一些小技巧你会了吗
- 【Thread】简单说说java.lang.Thread.State
- UA MATH571B 试验设计 总结 判断试验类型的例题
- Apache Kafka-CMAK(kafka manager)安装部署使用
- UltraEdit常用配置搭建Java/C开发环境
- 利用fiddler将本地网页放到某个域下
- LeetCode MySQL 1435. 制作会话柱状图
- python元祖和文件用法举例
- sccm安装手动下载必备组建
- 如何才能降低真机测试成本和建议所使用平台
- matlab实现一阶低通滤波器,matlab仿真一阶低通滤波器幅频特性和相频特性[计算机类]...
- i386/i686/x86-64的区别
- Unable to start ServletWebServerApplicationContext due to missing ServletWebServerFactory bean
- java如何实现识别图片上的文字
- 手机打电话提示无法连接到移动网络
- elasticsearch7.8.0入门操作
- 计算一元二次方程(考虑实根虚根无解)
- Word2019中Visio对象图片插入题注时自动删除标签与编号前的空格,编号后添加空格
- osgearth处理大tiff文件:利用VPB工具构建静态四叉树,使用osgearth加载成为地形层
- PZT-NI磁电复合薄膜|PZT/Pt/Si薄膜|直径为0.1mm
热门文章
- Png图片换色的方法
- 技法の穴をふさぐ:コスト編 --人月単価は案件ごとにバラバラ公表データで相場を知る
- Win10 系统设置共享文件
- win远程桌面连接无显示器Ubuntu(22.04.1 LTS)
- OddBall-图异常点检测
- KBEngine 房间示例创建脚本调用解读
- Web前端开发三剑客是做什么的?
- communicate(communicate with sb等于)
- FL Studio 21中文版支持主题随心换,FL Studio 21Mac版新增对苹果M2/1家族芯片原生支持。
- 华为鸿蒙和yunos,阿里的YunOS跟华为的鸿蒙差距大么?