一次五分钟 angularJS （1）—— Binding
引用angularjs
需要使用AngularJS，需要引用AngularJS的文件
ng-app
要将angular用到页面绑定的时候，我们需要指明它的作用域。
在上图中，ng-app="" 表示我们现在演示的angular的作用域在该<div>标签之内。当然我们也可以将ng-app=""写在<body>标签上。写在哪个标签，我们的angular语法就支持在哪。
接下来，我们看看效果
可以看出，<div>中的{{2+2}}就被解析成4了，而<div>外的{{2+2}}则原样输出。
表达式
在angular语法中，{{}}中的内容即为表达式，可以作一般javascript语法处理。
Binding
我们在页面上添加一个<input>，希望<input>输入什么，{{}}表达式就显示什么。
看看效果
可以看到文本框中输入什么，“Hello”后面就会显示文本框中的内容，这就是angular中的binding
其中ng-model的值，相当于定义了一个变量，该变量名为name。如果该变量不存在则创建它。该变量的值绑定在当前的<input>标签的value属性值上。
{{name}}则表示读取ng-model对应的变量name的值，即<input>的value。
示例
在html页面上添加2个css样式，分别是显示红色和绿色。
将<span>的class属性与文本框的值进行绑定，现在我们在文本框中输入red，green后看看效果
原创博客，未经允许，请勿转载。
一次五分钟 angularJS （1）—— Binding的更多相关文章
- 五分钟搞定Go.js
五分钟搞定Go.js 1.基于html5~因为Go.js是一个依赖于HTML5特性的JavaScript库,所以需要确保您的页面声明它是一个HTML5文档,当然需要加载库 <!DOCTYPE ...
- 用五分钟重温委托，匿名方法，Lambda，泛型委托，表达式树
这些对老一代的程序员都是老生常谈的东西,没什么新意,对新生代的程序员却充满着魅力.曾经新生代,好多都经过漫长的学习,理解,实践才能掌握委托,表达式树这些应用.今天我尝试用简单的方法叙述一下,让大家在五 ...
- [分享] 史上最简单的封装教程，五分钟学会封装系统（以封装Windows 7为例）
[分享] 史上最简单的封装教程,五分钟学会封装系统(以封装Windows 7为例) 踏雁寻花 发表于 2015-8-23 23:31:28 https://www.itsk.com/thread-35 ...
- JVM内存管理------GC算法精解（五分钟让你彻底明白标记/清除算法）
相信不少猿友看到标题就认为LZ是标题党了,不过既然您已经被LZ忽悠进来了,那就好好的享受一顿算法大餐吧.不过LZ丑话说前面哦,这篇文章应该能让各位彻底理解标记/清除算法,不过倘若各位猿友不能在五分钟内 ...
- 转帖：用五分钟重温委托，匿名方法，Lambda，泛型委托，表达式树
用五分钟重温委托,匿名方法,Lambda,泛型委托,表达式树 这些对老一代的程序员都是老生常谈的东西,没什么新意,对新生代的程序员却充满着魅力.曾经新生代,好多都经过漫长的学习,理解,实践才能掌握委托 ...
- 《sort帮你排序》-linux命令五分钟系列之二十六
本原创文章属于<Linux大棚>博客,博客地址为http://roclinux.cn.文章作者为rocrocket. 为了防止某些网站的恶性转载,特在每篇文章前加入此信息,还望读者体谅. ...
- 《sed的流艺术之四》-linux命令五分钟系列之二十四
本原创文章属于<Linux大棚>博客,博客地址为http://roclinux.cn.文章作者为rocrocket. 为了防止某些网站的恶性转载,特在每篇文章前加入此信息,还望读者体谅. ...
- 《sed的流艺术之三》-linux命令五分钟系列之二十三
本原创文章属于<Linux大棚>博客,博客地址为http://roclinux.cn.文章作者为rocrocket. 为了防止某些网站的恶性转载,特在每篇文章前加入此信息,还望读者体谅. ...
- 《sed的流艺术之二》-linux命令五分钟系列之二十二
本原创文章属于<Linux大棚>博客,博客地址为http://roclinux.cn.文章作者为rocrocket. 为了防止某些网站的恶性转载,特在每篇文章前加入此信息,还望读者体谅. ...
随机推荐
- Azure Devops: COPY failed: stat /var/lib/docker/tmp/docker-builder268095359/xxxxxxx.csproj no such file or directory
在Azure Devops中部署docker镜像时, 出现COPY failed: stat /var/lib/docker/tmp/docker-builder268095359/xxxxxxx. ...
- HDU 6053(莫比乌斯反演)
题意略. 思路:首先想到暴力去扫,这样的复杂度是n * min(ai),对于gcd = p,对答案的贡献应该是 (a1 / p) * (a2 / p) * .... * (an / p),得出这个贡献 ...
- xib上的控件属性为什么要使用weak
常规中,从xib拖出一个控件时,系统会自动生成一段代码,如下: 从这个图片中,可以看到控件的属性都是用的weak,这是为什么呢? 首先,如果把weak修改成strong其实也是可以的,但是会出现一个问 ...
- mysql安装-yum方式
1.环境 查看当前系统环境,使用的是 centos release 6.5 (Final). 2.检查当前系统是否已经安装过mysql rpm -qa | grep mysql 3.如果有,那么删除已 ...
- Linux下手动安装MySQL5.7
1.下载tar包,这里使用wget从官网下载 https://dev.mysql.com/downloads/mysql/ 2.将mysql安装到/usr/local/mysql下 # 解压 tar ...
- Codefroces 374 B Inna and Sequence (树状数组 || 线段树）
Inna and Sequence 题意:先给你一个n,一个m, 然后接下来输入m个数,表示每次拳击会掉出数的位置,然后输入n个数,每次输入1或0在数列的末尾加上1或0,如果输入-1,相应m序列的数的 ...
- CODE[VS] 1294 全排列
1294 全排列 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Description 给出一个n, 请输出n的所有全 ...
- codeforces 761 D. Dasha and Very Difficult Problem（二分+贪心）
题目链接:http://codeforces.com/contest/761/problem/D 题意:给出一个长度为n的a序列和p序列,求任意一个b序列使得c[i]=b[i]-a[i],使得c序列的 ...
- git 生成密钥
1.本地安装好git: 2.桌面右键 Git Bash Here 打开git命令行: 3.ssh-keygen -t rsa -C "nideyouxiang@xxx.com" ...
- IDC数据中心应具备如下基本条件:
IDC数据中心应具备如下基本条件: 电力:有充足的直流电力保证,同时还应具备UPS不间断电源及充足的电池组以备用.高端数据中心通常配备柴油发电机等. 环境:符合电信标准的建筑设施,防尘防静电,相对适合 ...