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 三足鼎立的局面,你不选择一个阵营基本上无法立足于前端,甚至是两个或者三个阵营都要选择,大势所趋. 所以我们要时刻保持好奇心,拥抱变化,只有在不断的变 ...
随机推荐
- Algorithm --> 顺序打印矩阵
顺序打印矩阵 思路 参考代码 #include <iostream> using namespace std; ], int row, int col) { || col < ) r ...
- DB2开发系列之三——SQL函数
1.内置函数分类(SYSIBM模式内) 1)标量函数:返回一个标量值的函数: 2)聚合函数:也叫列函数,也返回一个标量值,这个值是一组输入值的计算结果:3)表函数:向引用它的 SQL 语句返回一个表: ...
- 基于docker 部署 canvas-lms
准备: 一台8G内存的服务器.安装好docker, pull一个ubuntu镜像下来, 可以是最新版也可以是官方支持的14/ 16 Step 1: 启动docker容易加载ubuntu镜像.命令如下 ...
- JVM GC算法
在判断哪些内存需要回收和什么时候回收用到GC 算法,本文主要对GC 算法进行讲解. JVM垃圾判定算法 常见的JVM垃圾判定算法包括:引用技术算法.可达性分析算法. 引用技术算法(Reference ...
- C++中输出流的刷新问题和 endl和 \n的区别
<C++ Primer>第5版 P6中提到endl具有换行和刷新输出流两个作用,那么没有 endl是否还会将输出流中的内容输出到设备中,再刷新输出流呢? cout << &qu ...
- Leetcode 24——Swap Nodes in Pairs
Given a linked list, swap every two adjacent nodes and return its head. For example, Given 1->2-& ...
- alpha冲刺第六天
一.合照 二.项目燃尽图 三.项目进展 主界面首页内容呈现 我的栏目之我的问题完成 我的栏目之我的提问完成 还是插不进去,然后打算先放一放,一直在一个地方纠结那么久脑子太乱 四.明日规划 问答界面问题 ...
- C语言博客作业--函数
一.PTA实验作业 题目1 (6-7) (1).本题PTA提交列表 (2)设计思路 设计第一个函数判断是否完数int factorsum( int number ) 定义sum.i:sum初始化归0, ...
- Dijkstra算法课后补分博客
题目名称:Dijkstra算法 题目要求:课上给出相关附图,求解附图顶点A的单源最短路径. 附图: 做题过程 1.了解Dijkstra算法的相关知识,包括定义以及使用方法. 定义:Dijkstra算法 ...
- iOS极光推送SDK的使用流程
一.极光推送简介 极光推送是一个端到端的推送服务,使得服务器端消息能够及时地推送到终端用户手机上,整合了iOS.Android和WP平台的统一推送服务.使用起来方便简单,已于集成,解决了原生远程推送繁 ...