<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="js/angurlar素材/angular/angular.js"></script>
</head>
<body>
<div ng-app="">//指令的作用域
<p>名字:<input type="text"; ng-model="name"></p> //绑定变量name
<h1 ng-bind="name"><h1> 输出model绑定的数据
</div>
</body>
</html>

ng-app 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的"所有者"。

ng-model 指令把输入域的值绑定到应用程序变量 name

ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

angurlar中初始化变量

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="js/angurlar素材/angular/angular.js"></script>
</head>
<body>
<div ng-app="" ng-init='firstName="Jon"'>//初始化应用程序变量

<h1 ng-bind="firstName"><h1>//输出初始化的变量
</div>
</body>
</html>

angular中视图与控制器的双向绑定

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>

</head>
<body>
<div ng-app="myApp" ng-init='firstName="Jon"' ng-controller="mycrl">

<input type="text" ng-model="name" />//绑定name数据
<h2>年龄:{{age}}</h2>//输出控制器中的数据
</div>
</body>
</html>

angular 中的css样式

<style>
input.ng-invalid{
background: red;
}
</style>
<body>
<div ng-app="myApp" ng-init='firstName="Jon"' ng-controller="mycrl">

<input type="text" ng-model="name" required/>
<h2>年龄:{{age}}</h2>
</div>
</body>
</html>

ng-model 指令根据表单域的状态添加/移除以下类:

  • ng-empty
  • ng-not-empty
  • ng-touched
  • ng-untouched
  • ng-valid
  • ng-invalid
  • ng-dirty
  • ng-pending
  • ng-pristine

angularjs bind与model配合双向绑定 表达式方法输出的更多相关文章

  1. Angular系列----AngularJS入门教程05:双向绑定(转载)

    在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f ...

  2. [转载]AngularJS入门教程04:双向绑定

    在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f ...

  3. angularjs directive scope 与父scope双向绑定

    参考 http://www.jb51.net/article/83051.htm angluar.module("aaa").directive("testDirecti ...

  4. jQuery的三种bind/One/Live/On事件绑定使用方法

    本篇文章介绍了,关于jQuery新的事件绑定机制on()的使用技巧.需要的朋友参考下   今天浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQ ...

  5. Angularjs 双向绑定机制解析

    文章转自:http://www.2cto.com/kf/201408/327594.html AngularJs 的元素与模型双向绑定依赖于循环检测它们之间的值,这种做法叫做脏检测,这几天研究了一下其 ...

  6. Vue.js双向绑定原理

    Vue.js最核心的功能有两个,一个是响应式的数据绑定系统,另一个是组件系统.本文仅仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化的代码实现一个简单的hello world示例. 一.访问器属 ...

  7. Vue.js双向绑定的实现原理

    Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少 ...

  8. Vue.js双向绑定的实现原理和模板引擎实现原理(##########################################)

    Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...

  9. Vue双向绑定原理,教你一步一步实现双向绑定

    当今前端天下以 Angular.React.vue 三足鼎立的局面,你不选择一个阵营基本上无法立足于前端,甚至是两个或者三个阵营都要选择,大势所趋. 所以我们要时刻保持好奇心,拥抱变化,只有在不断的变 ...

随机推荐

  1. scrapy---callback 传递自定义参数

    在scrapy提交一个链接请求是用 Request(url,callback=func) 这种形式的,而parse只有一个response参数,如果自定义一个有多参数的parse可以考虑用下面的方法实 ...

  2. strcat函数

    原型:char  *strcat  ( char  *dest, const  char  *src) 用法:#include  <string.h> 功能:连接两个字符串:strcat( ...

  3. SIMD---AVX系列

    AVX全称Advanced Vcetor Extension,是对SSE的后续扩展,主要分为AVX.AVX2.AVX512三种.在目前常见的机器上,大多只支持到AVX系列,因此其他SIMD扩展指令我们 ...

  4. JavaScript(第十天)【Function类型】

    在ECMAScript中,Function(函数)类型实际上是对象.每个函数都是Function类型的实例,而且都与其他引用类型一样具有属性和方法.由于函数是对象,因此函数名实际上也是一个指向函数对象 ...

  5. Rails 定时任务——whenever实现周期性任务

    根据项目的进展,我们需要实现后台进行定时读取信息的功能,而最关键的实现部分是周期性功能,根据调研,决定使用whenever来实现这一功能. github:https://github.com/java ...

  6. alpha-咸鱼冲刺day5-紫仪

    总汇链接 一,合照 emmmmm.自然还是没有的. 二,项目燃尽图 三,项目进展 !!!QAQ可以做到跟数据库交互了!!!!先来撒花花!(然后继续甲板) 四,问题困难   日常啥都不会,百度真心玩一年 ...

  7. C语言博客作业--字符数组

    一.PTA实验作业 题目1:统计一行文本的单词个数 1. 本题PTA提交列表 2. 设计思路 Begin 定义字符型变量ch,pre=' ': 定义整型变量count://用来记录单词个数 count ...

  8. scrapy 避免被ban

    1.settings.pyCOOKIES_ENABLED = False DOWNLOAD_DELAY = 3 ROBOTSTXT_OBEY = Falseip代理池设置 IPPOOL = [{'ip ...

  9. android 框架LoonAndroid,码农偷懒专用

    介绍 http://www.eoeandroid.com/thread-324764-1-1.html 架构培训视频: http://pan.baidu.com/s/1mgv8HTm 简介:下载 ht ...

  10. NetFPGA Demo ——reference_router_nf1_cml

    NetFPGA Demo --reference_router_nf1_cml 前言 本博文主要介绍了reference_router_nf1_cml该demo的一路运行,以及一路上艰难跑通遇到的坑. ...