引用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. Leetcode之回溯法专题-17. 电话号码的字母组合(Letter Combinations of a Phone Number)

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

  2. HTTP协议请求响应模型

    HTTP协议请求响应模型:以”用户登录“这个场景来描述 第一步:客户端发起请求到API接口层,操作:用户在客户端填写用户名和密码,点击登录,发送请求. 第二步:api接收到客户端发起的用户请求,api ...

  3. Bluetooth（蓝牙）连接过程分析

    一 基本概念 蓝牙的连接过程是十分重要的,特别是做蓝牙的技术人员来说,这个是十分重要的.理它的流程,是一件必修课.虽然进入蓝牙行业很久了,以前没怎么系统化的做一些事情,趁此机会,就梳理一下这里面的内容 ...

  4. POJ-2155-Matrix二位树状数组应用

    题目: 一个只有0和1构成的二维平面,给你两种指令,一种是区间的更新,即0变为1,1变为0:一种是查询一个点是1还是0: 由于是二进制,所以每次更新在相应的点上加一,最后对2取余即可. 至于二维的树状 ...

  5. codeforces 828 C. String Reconstruction（思维+优先队列）

    题目链接:http://codeforces.com/contest/828/problem/C 题解:有点意思的题目,可用优先队列解决一下具体看代码理解.或者用并查集或者用线段树都行. #inclu ...

  6. codeforces 361 D. Levko and Array（dp+二分）

    题目链接:http://codeforces.com/contest/361/problem/D 题意:最多可以修改K次数字,每次修改一个数字变成任意值,C=max(a[i+1]-a[i]):求操作之 ...

  7. 通过对微信pc hook实现微信助手

    本软件主要通过对pc端微信hook来实现的,微信版本2.6.8.52. 软件下载地址: http://blog.yshizi.cn/104.html 软件实现功能: 支持爆粉 支持文本消息群发 支持自 ...

  8. POJ 3083 Children of the Candy Corn (DFS + BFS)

    POJ-3083 题意: 给一个h*w的地图. '#'表示墙: '.'表示空地: 'S'表示起点: 'E'表示终点: 1)在地图中仅有一个'S'和一个'E',他们为位于地图的边墙,不在墙角: 2)地图 ...

  9. erlang加密模块crypto的一些使用

    crypto 模块描述:该模块提供一系列加密函数: 散列函数-安全散列标准,MD5报文摘要算法(RFC 1321)和MD4报文摘要算法(RFC 1320); Hmac函数-散列消息认证(RFC 210 ...

  10. java课堂测试样卷-----简易学籍管理系统

    程序设计思路:分别建立两个类:ScoreInformation类(用来定义学生的基本信息以及设置set和get函数)ScoreManagement类(用来定义实现学生考试成绩录入,考试成绩修改,绩点计 ...