form.FormController

FormController跟踪所有他所控制的和嵌套表单以及他们的状态,就像有效/无效或者脏值/原始。

每个表单指令创建一个FormController实例。

方法

$addControl();

给表单注册一个控制器。

使用了ngModelController的输入元素会在连接时自动执行。

$removeControl();

给表单注销一个控制器。

使用了ngModelController的输入元素会在注销时自动执行。

$setValidity();

给表单设置表单控制器的有效性。

此方法也将传播到父表单。

$setDirty();

给表单设置一个脏状态。

这个方法将被调用去添加类“ng-dirty”,给表单设置一个脏状态。这个方法将传到父表单。

$setPristine();

将表单设置为原始状态。

这种方法被调用去删除类“ng-dirty”,给表单设置初始状态。这个方法将传到父表单。

属性:

$pristine

如果用户和表单尚未进行交互,则为true。

$dirty

如果用户和表单已进行交互,则为true。

$valid

所有的表格和控制器都是验证有效,则为true。

$invalid

如果至少有一个控件或表单验证无效,则为true。

$error

是一个hash对象,包含引用无效的控制器或表单。

ngModel.NgModelController

ngModel.NgModelController为ng-model指令提供了API。该控制器包含数据绑定,验证,CSS更新服务,和值的格式化和解析。它很明确的不包含任何逻辑处理,DOM渲染或者监听事件。这种的DOM相关的逻辑应该由其他使用NgModelController进行数据绑定指令提供。

方法

$render();

当视图需要更新时调用。

$isEmpty(value);

当我们需要判断input的值是否为空时可执行。例如, input的值是否存在,则需要的指令执行此函数。默认的$isEmpty函数检查值是否是“undefined”、“”、null或者NaN。

Value:检查的引用。

$setValidity(validationErrorKey,isValid);

改变有效性的状态,并通知表单当控制器的有效性发生变化。(如果验证器已经被标记为无效,则不通知表单。)

在需要验证的时候这种方法被调用---即分析器或格式化功能。

validationErrorKey:验证器的名称。validationErrorKey将会被分配给$error[validationErrorKey ] =isValid,这样就可以进行数据绑定了。

isValid:当前状态是否是valid(true)或者invalid(false)。

$setPristine();

设置控制器初始化状态。

$setViewValue(value);

更新页面的值。

当页面上的值发生变化时,这个方法被调用。

value:页面上的值。

属性

$viewValue

页面上实际的字符串值。

$modelValue

模型中控制器绑定的的该值。

$parsers

被执行的功能数组,作为一个控制器从DOM读取值的管道。每一个函数被调用去传递值到下一个,最后返回值用于填充模型。用于净化/转换或者验证值。为了验证,解析器应该使用$setvalidity()更新有效状态,并返回未定义的无效值。

$formatters

被执行功能的数组,作为一个控制器从DOM读取值的管道。每一个函数被调用去传递值到下一个,最后返回值用于填充模型。用于的格式化/转换在控制器和验证中显示的值。

$viewChangeListeners

当页面上值变化时所执行的函数的数组。它没有参数被执行,它的返回值被忽略。这可以用来代替对模型值额外的监听。

$error

带有所有错误的hash对象。

$pristine

用户还没有与控制器交互,则为true。

$dirty

用户已经与控制器交互,则为true。

$valid

如果没错误,则为true。

$invalid

控制器上至少有一个错误,则为true。

使用代码:

  div[contenteditable] { border: 1px solid black; background-color: white; min-height: 24px; width: 200px; margin-top: 20px; }.myDiv { float: left; display: block; margin-left: 30px; }

  <div ng-app="Demo" ng-controller="testCtrl as ctrl"><div class="myDiv"><div content-editable strip-br="true" ng-model="ctrl.userContent">Hello World!</div></div><div class="myDiv"><textarea ng-model="ctrl.userContent" style="min-height: 240px"></textarea></div></div>

  (function () {angular.module("Demo", ["ngSanitize"]).directive("contentEditable", contentEditable).controller("testCtrl",angular.noop);function contentEditable() {return {restrict: "A",require: "?ngModel",link: function (scope, element, attrs, ngModel) {if (!ngModel) return;ngModel.$render = function () {element.html(ngModel.$viewValue || "");};element.on("blur keyup change", function () {scope.$apply(read);});read();function read() {var html = element.html();if (attrs.stripBr && html == "<br />") {html = "";}ngModel.$setViewValue(html);}}};}}());

上面对于FormController的那些属性,可以作为angular表单验证的判断。对于下面的NgModelController,用的不多,不过几个方法和属性在指令中还是挺方便使用的,感觉这种操作也和jquery操作相似。

AngularJs form.FormController、ngModel.NgModelController相关推荐

  1. http请求中的Query String Parameters、Form Data、Request Payload

    参考: (1).(http请求参数之Query String Parameters.Form Data.Request Payload) - https://www.jianshu.com/p/c81 ...

  2. Ajax (部分二:prototype.js代码后半部分)自己做的,总结页面向后台传Form值、单个值和后台向前台传一个或是一组值...

    2019独角兽企业重金招聘Python工程师标准>>> Ajax (部分二:prototype.js代码后半部分)自己做的,总结页面向后台传Form值.单个值和后台向前台传一个或是一 ...

  3. tornado web高级开发项目之抽屉官网的页面登陆验证、form验证、点赞、评论、文章分页处理、发送邮箱验证码、登陆验证码、注册、发布文章、上传图片...

    本博文将一步步带领你实现抽屉官网的各种功能:包括登陆.注册.发送邮箱验证码.登陆验证码.页面登陆验证.发布文章.上传图片.form验证.点赞.评论.文章分页处理以及基于tornado的后端和ajax的 ...

  4. Web前端学习笔记——AngularJS之简介、起步、特性

    目录 Angular 简介 Angular 是什么 特性 发展历史 起源 困境 Angular 2 横空出世 ng2 相比 ng1 现状 那我为什么要学习使用 Angular ? 学习 Angular ...

  5. [Angularjs]ng-repeat中使用ng-model遇到的问题

    写在前面 在ng-reapet中如何为ng-model双向绑定呢?在项目中确实遇到这样的问题,绑定了,但是在controller中获取不到它的值,确实挺奇怪的. 系列文章 [Angularjs]ng- ...

  6. Web框架之Django_08 重要组件(form组件、cookie和session组件)

    阅读目录 一.form组件 二.cookie与session Django中操作Cookie 摘要: form组件 cookie组件 session组件 一.form组件 form介绍 我们之前在ht ...

  7. 3.odoo的学习(odoo中的视图:tree视图、form视图、search视图)

    目录 1.什么是视图 2.视图的声明方式 3.tree视图 4.form视图 5.search视图 6.优先级 1.什么是视图 在Odoo中,视图(view)定义了模型记录的显示方式. 每种类型的视图 ...

  8. form组件、cookie、session机制

    一.django form组件 1.渲染标签 2.校验数据 3.展示信息 校验数据: 第一步需要一个form类 from django import formsclass MyForm(forms.F ...

  9. ng-init、ng-bind、ng-model和ng-value区别

    ng-init : 初始化应用时创建变量,并给变量赋值.初始化多个变量时用分号 ; 隔开. <!DOCTYPE html> <html> <head> <me ...

最新文章

  1. zabbix snmp trap 监控
  2. led灯bin值_「技术贴」如何判断LED透明屏正发光与侧发光的优劣?
  3. bs模型Nd怎么用计算机算,BS模式的下试卷自动生成系统的设计与实现
  4. 有没有python的班_【万字长文】别再报班了,一篇文章带你入门Python
  5. silverlight 如何在浏览器的新页面里打开一个xaml
  6. python模拟购物车购物过程_Python基于数列实现购物车程序过程详解
  7. win2008启动计算机应用配置,[计算机软件及应用]WIN2008_NAP服务器配置详解.doc
  8. Screaming Frog SEO Spider的11个鲜为人知的功能
  9. 推荐几款好的小程序UI库组件
  10. vue中使用阿里图标
  11. Hexo博客与Next主题的高级应用
  12. PMP第十章:项目沟通管理
  13. jenkins with ant 和 invoke ant
  14. 低通滤波器的一阶RC电路模型
  15. 帝国CMS7.2管理员密码重置
  16. 教你利用阿里云服务器搭建一个随时随地的Web IDE
  17. antv图形二次渲染刷新问题
  18. 哪个网站的电子书最多?
  19. 刘雨昕成为Swisse斯维诗胶原蛋白系列代言人
  20. selenium定位下拉菜单

热门文章

  1. 谷歌AI的七个“不正经”玩法,个个能玩一整天
  2. 顶尖黑客集结令 | GeekPwn2018上海站邀你“决战AI安全”
  3. 英伟达新GPU发布:快到飞起,快到老黄瞬间学会了跳舞
  4. 小米距告别破发还差2分钱
  5. 使用idea导入文件夹作为项目时,在项目中的文件夹可能会被隐藏
  6. 如何让Android手机远离间谍软件?看这里
  7. UIPageViewController用法
  8. excel判断单元格包含指定内容的函数用=IF(COUNTIF(A1,*内容*),0,1)
  9. 运用枚举展示静态数据
  10. NodeJS 加密 —— crypto 模块