[AngularJS] Angular 1.3 ng-model-options - getterSetter
getterSetter: boolean value which determines whether or not to treat functions bound to ngModel as getters/setters to have greater control over your model.
allowInvalid: boolean value which indicateds that the model can be set with values that did not validate correctly instead of the default behavior of setting the model to undefined.
For example input type="email".
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<title>What's new in Angular 1.3</title>
</head>
<body ng-app="app" ng-controller="MainCtrl as vm">
<h1>Angular {{vm.angularVersion}}</h1>
<h2>
ngModelOptions
<small>by <a href="http://twitter.com/kentcdodds">@kentcdodds</a></small>
</h2>
<hr /> <h2>Demo</h2> <form name="myForm" novalidate>
<label>
Some input:
<input
type="email"
name="myField"
ng-model="vm.inputValue"
ng-model-options="vm.modelOptions"
required /> </label>
<button type="submit">Submit</button>
</form> Bound value: <span ng-bind="vm.inputValue"></span> <br />
Field Error State: <pre>{{myForm.myField.$error | json}}</pre> <br />
Form Error State: <pre>{{myForm.$error | json}}</pre>
myForm.$submitted: {{myForm.$submitted}} </body>
</html>
var app = angular.module('app', []);
app.controller('MainCtrl', function MainCtrl() {
'use strict';
var vm = this,
_val = '';
vm.angularVersion = angular.version.full;
vm.modelOptions = {
getterSetter: true,
allowInvalid: true
};
vm.inputValue = function(val) {
return angular.isDefined(val) ? (_val = val) : _val;
}
});
Read More: https://egghead.io/lessons/angularjs-new-in-angular-1-3-ng-model-options-getters-and-setters
[AngularJS] Angular 1.3 ng-model-options - getterSetter的更多相关文章
- AngularJs学习笔记--Understanding the Model Component
原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model 在angular文档讨论的上下文中,术语“model”可以 ...
- Angularjs 学习笔记-2017-02-05-初识Angular及app、model、controller、repeat指令和fileter、orderBy
ng-app 定义作用域,从作用域处开始执行ng命令指令 ng-model 数据绑定字符,用于双向数据绑定 ng-controller ng控制台,定义function name($scope)来 ...
- angularjs中常用的ng指令介绍【转载】
原文:http://www.cnblogs.com/lvdabao/p/3379659.html 一.模板中可使用的东西及表达式 模板中可以使用的东西包括以下四种: 指令(directive).ng提 ...
- [AngularJS] Angular 1.3 ngMessages with ngAnimate
Note: Can use $dirty to check whether user has intracted with the form: https://docs.angularjs.org/a ...
- [AngularJS] Angular 1.3 $submitted for Form in Angular
AngularJS 1.3 add $submitted for form, so you can use $submitted to track whether the submit event ...
- AngularJs angular.element
angular.element 将DOM元素或者HTML字符串一包装成一个jQuery元素. 格式:angular.element(element); element:包装成jquery对象的html ...
- AngularJs angular.bind、angular.bootstrap、angular.copy
angular.bind 返回一个调用self的函数fn(self代表fn里的this).可以给fn提供参数args(*).这个功能也被称为局部操作,以区别功能. 格式:angular.bind(se ...
- [Angularjs]angular ng-repeat与js特效加载先后导致的问题
写在前面 最近在项目中遇到这样的一个前端的bug,在ng-repeat中绑定的图片,有一个晃动的特效,在手机端浏览的时候,图片有时候会正常展示,有时就展示不出来.当时猜测是因为angularjs与特效 ...
- AngularJS - Apply方法监听model变化
<body> <div ng-app="myApp"> <div ng-controller="firstController" ...
随机推荐
- DateFormat 线程安全
SimpleDateformat 线程不安全 SimpleDateFormat 继承自 DateFormat, SimpleDateFormat中的parse方法override父类DateForma ...
- SSMdemo:租房管理系统
使用ssm框架整合,oracle数据库 框架: Spring SpringMVC MyBatis 导包: 1, spring 2, MyBatis 3, mybatis-spring 4, fastj ...
- 【拓扑排序或差分约束】Guess UVALive - 4255
题目链接:https://cn.vjudge.net/contest/209473#problem/B 题目大意:对于n个数字,给出sum[j]-sum[i](sum表示前缀和)的符号(正负零),求一 ...
- hdu1232 畅通工程 并查集的 应用
畅通工程 Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submi ...
- FFTW3学习笔记3:FFTW 和 CUFFT 的使用对比
一.流程 1.使用cufftHandle创建句柄 2.使用cufftPlan1d(),cufftPlan3d(),cufftPlan3d(),cufftPlanMany()对句柄进行配置,主要是配置句 ...
- 【转】_CrtSetBreakAlloc 内存泄漏
声明:本内容转载自 https://my.oschina.net/gp8wLHNUeKd2C/blog/110707 在使用VS开发过程中,(今日)遇到内存泄漏的情况.具体表现为: 在输出窗口中,显示 ...
- Linux知识(4)----文件系统结构
Ubantu 14.04的文件系统结构如下图所示: 参考资料: 1.http://www.cnblogs.com/wen858636827/archive/2012/12/26/2834373.htm ...
- Vue2.0实现双向绑定的原理
一.几种实现双向绑定的做法 目前几种主流的mvc(vm)框架都实现了单向数据绑定,而我所理解的双向数据绑定无非就是在单向绑定的基础上给可输入元素(input.textare等)添加了change(in ...
- 博雅PHP高级工程师面试题-自拟
作者:元如枫 2010年 1.现有学校课程内容系统简单需求描述,试着提供解决方案. 需求简单描述如下: 1)对象及属性 学校: 学校名称,学校所属分类,学校介绍,学校地图标记,学校所属地区,标签, ...
- jquery-问题解答
1.var v = $('.summer-input:input').val(); //依据class获取input 2.var v = $('input[name=user\\.name]').va ...