表单中的ngModelController
测试表单中的ngController。直接看红字结论部分即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="angular-1.5.5/angular.js"></script>
</head>
<body ng-app="app">
<form name="f">
<input required type="text" name="addr" ng-model="addrModel" xx>
{{f.addr.x}}
{{f.addr.$error.required}}
</form>
<script>
var app = angular.module('app',[]);
app.directive('xx',function(){
return {
require:'ngModel',
link:function(scope,ele,attr,ctrl){
ctrl.x = 'custom value';
}
}
})
</script>
</html>
以上两个值能正常显示。得出 f.addr实际上就是addrModel上的ngModelController,继续测试,对以上例子进行改造:
<form name="f">
<input required type="text" name="addr" ng-model="addrModel">
<div xx ng-model="addrModel"></div>
{{f.addr.x}}
{{f.addr.$error.required}}
</form>
运行结果:只显示一个true,那个custom value就不显示了。那是因为每一个ngModel指令即使关联的是同一个model,ngModelController也是不同的,验证如下:
<body ng-app="app">
<form name="f">
<div xx ng-model="addrModel"></div>
<div xx ng-model="addrModel"></div>
</form>
<script>
var app = angular.module('app',[]);
app.directive('xx',function(){
return {
require:'ngModel',
link:function(scope,ele,attr,ctrl){
console.log('get ' + ctrl.x)
ctrl.x = 123;
}
}
})
</script>
输出两个undefined。得证
表单中的ngModelController的更多相关文章
- jQuery中设置form表单中action的值的方法
下面介绍在jQuery中设置form表单中action的值的方法. $("#myFormId").attr("action", "userinfo.s ...
- 实现滑动条与表单中的input中的value交互
最近在写一个考试系统的项目,遇到一些比较有意思的小知识,在这里分享给大家 下面是一个滑动条与input中的value值的交互,即滑动条的颜色会跟随给定input的value值实时变化,虽然表单中的ra ...
- Form表单中的get和post的区别
method="get/post",两种方式的区别 Form中的get和post方法,在数据传输过程中分别对应了GET和POST方法.二者主要区别如下: 1.Get将表单中数据的按 ...
- jQuery中设置form表单中action值与js有什么不同。。。。
jQuery中设置form表单中action值与js有什么不同.... HTML代码如下: <form action="" method="post" i ...
- form表单中enctype="multipart/form-data"的作用
在我们使用php导入和导出excel表格的时候经常会见到 enctype="multipart/form-data",哪他的作用是什么呢? ENCTYPE="multip ...
- jsp中的form表单中的 id和name有什么区别了
<form action="./system/WebServer_webServerLogin" method="post" id="login ...
- juery与表单中name="nodeName"引起的冲突
引入jquery时,表单中如果有name="nodeName"的表单项,会有一些奇怪的冲突. 表单HTML代码如下: <form id="formAddEquipN ...
- 如何在启用SharePoint浏览器功能的InfoPath 表单中添加托管代码以动态地加载并显示图片
InfoPath 的浏览器表单不支持加载并显示图片,当然在模板中可以插入图片,但是如果想显示数据库的一幅图片,或是动态加载一张图片就无能为力了. 基实这个问题可以通过在浏览器表单中使用: " ...
- Form表单中的action路径问题,form表单action路径《jsp--->Servlet路劲问题》这个和上一个《jsp--->Servlet》文章有关
Form表单中的action路径问题,form表单action路径 热度5 评论 50 www.BkJia.Com 网友分享于: 2014-08-14 08:08:01 浏览数44525次 ...
随机推荐
- IT兄弟连 JavaWeb教程 请求重定向案例
Check2Servlet类与Output2Servlet类之间为请求转发关系.在web.xml文件中,为Check2Servlet映射的URL为"/check2",为Output ...
- day04 TimeZone类
- Hexo瞎折腾系列(3) - 添加GitHub彩带和GitHub Corner
页面右上角添加GitHub彩带 你可以在这里找到一共12种样式的GitHub彩带,复制其中的超链代码. 在themes\next\layout\_layout.swig目录下找到头部彩带相关的代码: ...
- AtCoder Regular Contest 062 E - AtCoDeerくんと立方体づくり / Building Cubes with AtCoDeer
题目传送门:https://arc062.contest.atcoder.jp/tasks/arc062_c 题目大意: 给你\(N\)块正方形木板,每块木板四角有四种颜色(可以相同),木板中央有编号 ...
- UVA - 1349 D - Optimal Bus Route Design
4. D - Optimal Bus Route Design 题意:给出n(n<=100)个点的带权有向图,找出若干个有向圈,每个点恰好属于一个有向圈.要求权和尽量小. 注意即使(u,v)和( ...
- Palindrome Partitioning LightOJ - 1044(回文串最小分割数,O(n^2)预处理子串是否回文)
题意:将一个字符串分割成最少的字符串,使得分割出的每个字符串都是回文串.输出最小的分割数. 方法(自己的):先O(n^2)(用某个点或某个空区间开始,每次向左右扩展各一个的方法)处理出所有子串是否回文 ...
- EOJ Monthly
###2018.10 A.oxx 的小姐姐们 oxx 和他的小姐姐(们)躺在图书馆前的大草坪上看星星. 有强迫症的 oxx 想要使得他的小姐姐们正好躺成一块 n×m 的长方形. 已知小姐姐的形状是 1 ...
- Eclipse显示空白符,及使用google代码格式化
启动Eclipse,打开Preferences对话框.菜单“window”-“Preferences”. 找到Text Editors,勾选show whitespace characters,如图: ...
- [转].NET 4 并行(多核)编程系列之二 从Task开始
本文转自:http://www.cnblogs.com/yanyangtian/archive/2010/05/22/1741379.html .NET 4 并行(多核)编程系列之二 从Task开始 ...
- android开发学习 ------- 枚举类型在Android中的用法
一般上为了简化代码,重用代码,设置标志位来表示不同的流程,这个标志位可以使用枚举类型来表示: 1:定义 public FbManner fbManer = FbManner.EMAIL; //给一个默 ...