引用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的更多相关文章

  1. 五分钟搞定Go.js

    五分钟搞定Go.js  1.基于html5~因为Go.js是一个依赖于HTML5特性的JavaScript库,所以需要确保您的页面声明它是一个HTML5文档,当然需要加载库 <!DOCTYPE ...

  2. 用五分钟重温委托，匿名方法，Lambda，泛型委托，表达式树

    这些对老一代的程序员都是老生常谈的东西,没什么新意,对新生代的程序员却充满着魅力.曾经新生代,好多都经过漫长的学习,理解,实践才能掌握委托,表达式树这些应用.今天我尝试用简单的方法叙述一下,让大家在五 ...

  3. [分享] 史上最简单的封装教程，五分钟学会封装系统（以封装Windows 7为例）

    [分享] 史上最简单的封装教程,五分钟学会封装系统(以封装Windows 7为例) 踏雁寻花 发表于 2015-8-23 23:31:28 https://www.itsk.com/thread-35 ...

  4. JVM内存管理------GC算法精解（五分钟让你彻底明白标记/清除算法）

    相信不少猿友看到标题就认为LZ是标题党了,不过既然您已经被LZ忽悠进来了,那就好好的享受一顿算法大餐吧.不过LZ丑话说前面哦,这篇文章应该能让各位彻底理解标记/清除算法,不过倘若各位猿友不能在五分钟内 ...

  5. 转帖：用五分钟重温委托，匿名方法，Lambda，泛型委托，表达式树

    用五分钟重温委托,匿名方法,Lambda,泛型委托,表达式树 这些对老一代的程序员都是老生常谈的东西,没什么新意,对新生代的程序员却充满着魅力.曾经新生代,好多都经过漫长的学习,理解,实践才能掌握委托 ...

  6. 《sort帮你排序》-linux命令五分钟系列之二十六

    本原创文章属于<Linux大棚>博客,博客地址为http://roclinux.cn.文章作者为rocrocket. 为了防止某些网站的恶性转载,特在每篇文章前加入此信息,还望读者体谅. ...

  7. 《sed的流艺术之四》-linux命令五分钟系列之二十四

    本原创文章属于<Linux大棚>博客,博客地址为http://roclinux.cn.文章作者为rocrocket. 为了防止某些网站的恶性转载,特在每篇文章前加入此信息,还望读者体谅. ...

  8. 《sed的流艺术之三》-linux命令五分钟系列之二十三

    本原创文章属于<Linux大棚>博客,博客地址为http://roclinux.cn.文章作者为rocrocket. 为了防止某些网站的恶性转载,特在每篇文章前加入此信息,还望读者体谅. ...

  9. 《sed的流艺术之二》-linux命令五分钟系列之二十二

    本原创文章属于<Linux大棚>博客,博客地址为http://roclinux.cn.文章作者为rocrocket. 为了防止某些网站的恶性转载,特在每篇文章前加入此信息,还望读者体谅. ...

随机推荐

  1. Docker跨服务器通信Overlay解决方案(下) Consul集群

    承接上文 本文基于上篇文章,详细的场景说明与分析在前篇随笔中业已记录,有兴趣可以移步 Docker跨服务器通信Overlay解决方案(上) Consul单实例 本文主旨 本文为Docker使用Cons ...

  2. ASP.NET Core 2.2 : 二十七. JWT与用户授权（细化到Action）

    上一章分享了如何在ASP.NET Core中应用JWT进行用户认证以及Token的刷新,本章继续进行下一步,用户授权.涉及到的例子也以上一章的为基础.(ASP.NET Core 系列目录) 一.概述 ...

  3. 使用Docker快速部署ELK分析Nginx日志实践（二）

    Kibana汉化使用中文界面实践 一.背景 笔者在上一篇文章使用Docker快速部署ELK分析Nginx日志实践当中有提到如何快速搭建ELK分析Nginx日志,但是这只是第一步,后面还有很多仪表盘需要 ...

  4. 【qt】【QString的诸多操作】

    前言: qt的数据处理莫过于QString,QString对于字符串的操作多的数不胜数.下面博主就将常用的罗列出来,一起分享. 正文: 下面的操作具体为:追加,查找,删除,提取,分割,各种转换等等. ...

  5. js 取两位小数

    var totalPrice = (product.unitPrice * product.nums).toFixed(2);

  6. SCRUM的五个事件

    转自:http://www.scrumcn.com/agile/scrum-knowledge-library/scrum.html#tab-id-7 Scrum 使用固定的事件来产生规律性,以此来减 ...

  7. [Error]Win8安装程序出现2502、2503错误解决方法

    转载自:http://jingyan.baidu.com/article/a501d80cec07daec630f5e18.html 在Win8中,在安装msi安装包的时候常常会出现代码为2502.2 ...

  8. HDU-6229 ICPC-沈阳M- Wandering Robots 概率

    HDU - 6229 题意: 在一个n*n的地图中,有一个初始在(0,0)位子的机器人,每次等概率的向相邻的格子移动或者留在原地.问最后留在格子(x,y)(x+y>=n-1)的地方的概率. 思路 ...

  9. POJ-1325 Machine Schedule 二分图匹配 最小点覆盖问题

    POJ-1325 题意: 有两台机器A,B,分别有n,m种模式,初始都在0模式,现在有k项任务,每项任务要求A或者B调到对应的模式才能完成.问最少要给机器A,B调多少次模式可以完成任务. 思路: 相当 ...

  10. codeforces 402 D. Upgrading Array（数论+贪心）

    题目链接:http://codeforces.com/contest/402/problem/D 题意:给出一个a串和素数串b .f(1) = 0; p为s的最小素因子如果p不属于b , 否则 . a ...