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的更多相关文章

  1. AngularJs学习笔记--Understanding the Model Component

    原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model 在angular文档讨论的上下文中,术语“model”可以 ...

  2. Angularjs 学习笔记-2017-02-05-初识Angular及app、model、controller、repeat指令和fileter、orderBy

    ng-app   定义作用域,从作用域处开始执行ng命令指令 ng-model 数据绑定字符,用于双向数据绑定 ng-controller ng控制台,定义function name($scope)来 ...

  3. angularjs中常用的ng指令介绍【转载】

    原文:http://www.cnblogs.com/lvdabao/p/3379659.html 一.模板中可使用的东西及表达式 模板中可以使用的东西包括以下四种: 指令(directive).ng提 ...

  4. [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 ...

  5. [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 ...

  6. AngularJs angular.element

    angular.element 将DOM元素或者HTML字符串一包装成一个jQuery元素. 格式:angular.element(element); element:包装成jquery对象的html ...

  7. AngularJs angular.bind、angular.bootstrap、angular.copy

    angular.bind 返回一个调用self的函数fn(self代表fn里的this).可以给fn提供参数args(*).这个功能也被称为局部操作,以区别功能. 格式:angular.bind(se ...

  8. [Angularjs]angular ng-repeat与js特效加载先后导致的问题

    写在前面 最近在项目中遇到这样的一个前端的bug,在ng-repeat中绑定的图片,有一个晃动的特效,在手机端浏览的时候,图片有时候会正常展示,有时就展示不出来.当时猜测是因为angularjs与特效 ...

  9. AngularJS - Apply方法监听model变化

    <body> <div ng-app="myApp"> <div ng-controller="firstController" ...

随机推荐

  1. java.io 文件分类

    文件分为二进制格式和文本格式. 数据在计算机中都是以二进制的形式表现的,一般来说字节是最小的数据逻辑单位,所以也可以说数据都是以字节序列的形式表现的,不管是在内存中还是磁盘文件中.如果直接把内存中的数 ...

  2. svn代码同步脚本

    碰到一个需求,主要是2个项目需要用到同一份代码,主要是域名和配置信息不一样,而且要把svn更新的代码同步过去.本来考虑提交时用钩子同步过去,但考虑到同步过去的代码还需要测试,而且另一边代码的时效性不强 ...

  3. React Native踩坑之Unable to load script from assets

    报错: Unable to load script from assets 'index.android.bundle'. Make sure your bundle is packaged corr ...

  4. 【BZOJ 2595】2595: [Wc2008]游览计划 （状压DP+spfa，斯坦纳树？）

    2595: [Wc2008]游览计划 Time Limit: 10 Sec  Memory Limit: 256 MBSec  Special JudgeSubmit: 1572  Solved: 7 ...

  5. [BZOJ5306][HAOI2018]染色

    bzoj luogu Description 给一个长度为\(n\)的序列染色,每个位置上可以染\(m\)种颜色.如果染色后出现了\(S\)次的颜色有\(k\)种,那么这次染色就可以获得\(w_k\) ...

  6. 实用小工具 -- 国家地区IP段范围查询工具

    如果想限制某个国家地区IP段访问,这几个查询工具就很有用了. 可以查询各个国家IP段范围,并且是持续更新的,使用方便. 当然,除此之外,你还可以通过APNIC.ARIN.RIPE这些官方IP分配机构查 ...

  7. Matlab 矩阵【Mark】

    一.矩阵的表示在MATLAB中创建矩阵有以下规则: a.矩阵元素必须在”[ ]”内: b.矩阵的同行元素之间用空格(或”,”)隔开: c.矩阵的行与行之间用”;”(或回车符)隔开: d.矩阵的元素可以 ...

  8. Vue学习记录-初探Vue

    写在开头 2017年,部门项目太多,而且出现了一个现象,即:希望既要有APP,也能够直接扫码使用,也能放到微信公众号里面. 从技术角度来说,APP我们可以选择原生开发,也可以选择ReactNative ...

  9. VS2010安装HTML5插件

    步骤: 1. 下载 插件 2.拷贝文件里面德尔html_5.xsd到 D:\Program Files (x86)\Microsoft Visual Studio 10.0\Common7\Packa ...

  10. react+redux+generation-modation脚手架搭建一个todolist

    TodoList 1. 编写actions.js 2. 分析state 试着拆分成多个reducer 3. 了解store 4. 了解redux数据流生命周期 5. 分析容器组件和展示组件 搞清楚,数 ...