引用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. unity之初级必备知识

    C#中有两种常见类型:值类型,引用类型.值类型存放在内存中栈里,引用类型在内存中栈里存放引用,实际存放在内存中的堆里.值类型继承自System.ValueType.System.ValueType继承 ...

  2. Android环境配置（Eclipse全开发环境下载）

    Android环境配置 前期准备 Android环境的Eclipse: 网站链接:https://www.runoob.com/w3cnote/android-tutorial-eclipse-adt ...

  3. Storm 系列（八）—— Storm 集成 HDFS 和 HBase

    一.Storm集成HDFS 1.1 项目结构 本用例源码下载地址:storm-hdfs-integration 1.2 项目主要依赖 项目主要依赖如下,有两个地方需要注意: 这里由于我服务器上安装的是 ...

  4. 美团张志桐：美团 HTTP 服务治理实践

    2019 年 7 月 6 日,OpenResty 社区联合又拍云,举办 OpenResty × Open Talk 全国巡回沙龙·上海站,美团基础架构部技术专家张志桐在活动上做了<美团 HTTP ...

  5. 别说你不会开发exe程序，拿走不谢。

    本文重点介绍如何将我们写的java代码打包成在电脑上可以运行的exe文件 本文重点介绍如何将我们写的java代码打包成在电脑上可以运行的exe文件.这里只介绍直接打包成exe的方法,至于打包成exe安 ...

  6. tit文件的加密解密

    加密 # hello 源文件 # ifmmp 加密 # hello 解密 file = open("Email.txt","r") # 源文件 只针对字符不需要 ...

  7. codeforce#483div2D-XOR-pyramid+DP

    题意:求给定区间中最大的连续异或和: 思路:DP的思想,先dp求出每个区间的异或和,再dp更新成当前这个dp[i][j]和dp[i-1][j].dp[i-1][j+1]中的最大值: 这样可以保证是同一 ...

  8. GNU大型项目构建和覆盖率生成（第一篇）

    目录 0. 序言 1. 项目描述 2. 项目构建 2.1 编译规则 2.2 构建过程 3. 覆盖率分析 0. 序言 在开始正文之前,请允许我先说明一下本文的目的和写作的动机,好让读者不惑. 我们知道, ...

  9. 【Hystrix】实现服务隔离和降级

    一.背景 1.1 服务熔断 1.2 服务降级 1.3 服务隔离 1.4 总结 二.使用Hystrix实现服务隔离和降级 2.1 Hytrix 简介 2.2 线程池方式 2.3 信号量 三.项目搭建 3 ...

  10. Day003_Linux基础——系统目录结构

    Linux系统的目录结构: 圆型节点代指目录,方型节点代指文件. 图中省去了很多不常用的目录与文件. 稍后单独讲/proc目录与/var目录. /usr 目录. /usr/local 用户个人安装的软 ...