angularjs bind与model配合双向绑定 表达式方法输出
<!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配合双向绑定 表达式方法输出的更多相关文章
- Angular系列----AngularJS入门教程05：双向绑定（转载）
在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f ...
- [转载]AngularJS入门教程04：双向绑定
在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f ...
- angularjs directive scope 与父scope双向绑定
参考 http://www.jb51.net/article/83051.htm angluar.module("aaa").directive("testDirecti ...
- jQuery的三种bind/One/Live/On事件绑定使用方法
本篇文章介绍了,关于jQuery新的事件绑定机制on()的使用技巧.需要的朋友参考下 今天浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQ ...
- Angularjs 双向绑定机制解析
文章转自:http://www.2cto.com/kf/201408/327594.html AngularJs 的元素与模型双向绑定依赖于循环检测它们之间的值,这种做法叫做脏检测,这几天研究了一下其 ...
- Vue.js双向绑定原理
Vue.js最核心的功能有两个,一个是响应式的数据绑定系统,另一个是组件系统.本文仅仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化的代码实现一个简单的hello world示例. 一.访问器属 ...
- Vue.js双向绑定的实现原理
Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少 ...
- Vue.js双向绑定的实现原理和模板引擎实现原理（##########################################）
Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...
- Vue双向绑定原理，教你一步一步实现双向绑定
当今前端天下以 Angular.React.vue 三足鼎立的局面,你不选择一个阵营基本上无法立足于前端,甚至是两个或者三个阵营都要选择,大势所趋. 所以我们要时刻保持好奇心,拥抱变化,只有在不断的变 ...
随机推荐
- 面试：Handler 的工作原理是怎样的？
面试场景 平时开发用到其他线程吗?都是如何处理的? 基本都用 RxJava 的线程调度切换,嗯对,就是那个 observeOn 和 subscribeOn 可以直接处理,比如网络操作,RxJava 提 ...
- codeforce round #467(div.2)
A. Olympiad 给出n个数,让你找出有几个非零并且不重复的数 所以用stl的set //#define debug #include<stdio.h> #include<ma ...
- JavaScript(第九天)【正则表达式】
假设用户需要在HTML表单中填写姓名.地址.出生日期等.那么在将表单提交到服务器进一步处理前,JavaScript程序会检查表单以确认用户确实输入了信息并且这些信息是符合要求的. 一．什么是正则表 ...
- alpha冲刺第七天
一.合照 二.项目燃尽图 三.项目进展 问答界面问答内容呈现 设置里的帐号设置呈现 能爬取教务处网站的内容保存到本地数据库 四.明日规划 继续完善各个内容的界面呈现 查找关于如何自动更新爬取内容 搜索 ...
- 阿尔法冲刺——Postmortem会议
设想与目标 1.我们软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 这个问题,我们觉得我们的软件目标还是比较明确的,在SRS中也给出了典型用户和典型场景的清晰的描述. 2 ...
- 201621123040《Java程序设计》第六周学习总结
1.本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图或相关笔记,对面向对象思想进行一个总结 2.书面作业 2.1clone方法 2.1.1在te ...
- 张金禹 C语言--第0次作业
1:在填报专业的时候,我也犹豫了很久,但最后还是选择了计算机专业.因为在上大学之前我就对编程.设计等有浓厚的兴趣,但繁重的高中学习任务使我没有过多的去关注,所以我选择了计算机专业去培养我在这方面的兴趣 ...
- iOS开发-添加圆角效果高效实现
圆角(RounderCorner)是一种很常见的视图效果,相比于直角,它更加柔和优美,易于接受.但很多人并不清楚如何设置圆角的正确方式和原理.设置圆角会带来一定的性能损耗,如何提高性能是另一个需要重点 ...
- 【nodejs】安装browser-sync 遇到错误提示
首先我用的是mac电脑在我执行安装browser-sync时遇到如下问题: 因为不被允许所以我只能不安装全局了: 但是又出现了如下的新问题 纠结了半个小时,终于知道为什么会出现这个问题了, node只 ...
- 【Fungus入门】10分钟快速构建Unity中的万能对话系统 / 叙事系统 / 剧情系统
我真的很久没有写过一个完整的攻略了(笑),咸鱼了很久之后还是想来写一个好玩的.这次主要是梳理一下Unity的小众插件Fungus的核心功能,并且快速掌握其使用方法. 官方文档:http://fungu ...