引用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. win10下配置chromedrive。

    0x01:查看自己chrome的版本号 点击chrome右上角菜单栏,帮助,关于Google chrome,在这里,你可以看到自己chrome的版本号. 0x02:下载对应的chrome drive ...

  2. Jmeter 02 Jmeter断言之响应断言

    看完上一篇博客,相信大家应该可以使用Jmeter发送HTTP请求了.那么我们既然是要测试,就肯定需要判断结果了.Jmeter对于请求的响应数据提供了几种断言机制,这里大概说一下比较常用的几种断言. 响 ...

  3. slice splice(数组) 和 slice substr substring split (字符串)的区别

    array.slice(start,end)slice()如果不传入参数二,那么将从参数一的索引位置开始截取,一直到数组尾如果两个参数中的任何一个是负数,array.length会和它们相加 stri ...

  4. js 前端实现打印功能

      // 此处是一个打印的方法  可以在点击事件的时候调用 dayin = () =>{ // 获取当前页面要打印的内容  // 这里的className(‘print’)是我给要打印的区域起的 ...

  5. Leetcode之回溯法专题-17. 电话号码的字母组合(Letter Combinations of a Phone Number)

    [Leetcode]17. 电话号码的字母组合(Letter Combinations of a Phone Number) 题目描述: 给定一个仅包含数字 2-9 的字符串,返回所有它能表示的字母组 ...

  6. Struts2中文乱码问题 过滤器源码分析

    整理自网上: 前几天在论坛上看到一篇帖子,是关于Struts2.0中文乱码的,楼主采用的是spring的字符编码过滤器 (CharacterEncodingFilter)统一编码为GBK,前台提交表单 ...

  7. kafka消息分发策略分析

    当我们使用kafka向指定Topic发送消息时,如果该Topic具有多个partition,无论消费者有多少,最终都会保证一个partition内的消息只会被一个Consumer group中的一个C ...

  8. xcode删除一个项目

    退出xcode. 在Finder中删除项目文件夹.

  9. 杭电多校 hdu6627 equation

    http://acm.hdu.edu.cn/showproblem.php?pid=6627 题意:解绝对值方程并统计解的个数. 解法:签到题,直接模拟小学数学学的零点分段法即可.(数据多直接cin, ...

  10. Codeforces 468 B Two Sets

    Two Sets 题意:就是将一对数放进setA, setB中, 如果放进setA的话要求满足 x与a-x都在这个集合里面, 如果放进setB中要求满足x与b-x都在这个集合中. 题解:我们将能放进B ...