一次五分钟 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. 为了防止某些网站的恶性转载,特在每篇文章前加入此信息,还望读者体谅. ...
随机推荐
- OpenXML性能真的低下吗？
博文NET导出Excel的四种方法及评测 中对比了4个库的导出性能,但对OpenXML的评价并不高,本人觉得不合理,所以我重新测试下性能 基于OpenXML的包装类 ExcelDownWorker p ...
- Redis学习总结(八)--Redis云平台
在实际生产环境中通过命令行的形式去进行集群的管理是一件很繁琐并且容易出现错误的事情,所以就引入了云平台的概念. 什么是云平台 Redis 云平台是指通过 BS 等架构实现对 Redis 的管理和监控. ...
- Liunx学习总结(四)--文件的权限管理
文件和目录的权限 每个文件都有其所有者(u:user).所属组(g:group)和其他人(o:other)对它的操作权限,a:all则同时代表这3者.权限包括读(r:read).写(w:write). ...
- java杨辉三角
public static void main(String[] args) { Scanner scanner=new Scanner(System.in); System.out.println( ...
- JSON转换方法解析
JSON.parse() 与 JSON.stringify() 的区别 JSON.parse() :是从一个字符串中解析出 json 对象 JSON.stringify():是从一个对象中解析出字符串 ...
- Keras（二）Application中五款已训练模型、VGG16框架解读
Application的五款已训练模型 + H5py简述 Keras的应用模块Application提供了带有预训练权重的Keras模型,这些模型可以用来进行预测.特征提取和finetune. 后续还 ...
- yzoj P2345 战争 题解
纯数论 30分:纯暴力,直接模拟判断t秒后,判断hp是否小于0 60分: atk>=h,就是一炮一个,那么军队会在min(n,t)秒之后停止攻击,那么总伤害就是a[n+(n-1) +(n-2)+ ...
- 洛谷P5335 [THUSC2016]补退选 题解
传送门 一道字典树的例题吧 先说下思路前1,2两个条件都易满足,字典树插入修改即可,第三个条件可用动态数组来实现,存下它的size表示当前有几个节点经过(即人数),其下标表示第几次出现,里面存入操作次 ...
- 如何在GitHub上上传自己的项目
此文为转载,地址:https://blog.csdn.net/m0_37725003/article/details/80904824 本文链接:https://blog.csdn.net/m0_37 ...
- C#客户端程序Visual Stadio远程调试
一,需求来源 在开发过程中,可能会要使用Win7 ,Win8 ,Win10等不同版本的系统去做兼容性调试,也有时候会去针对特别的显卡,无线网卡等等硬件设备的机器做优化,有一种较优的方案,那就是使用Vi ...