angularjs笔记
  • Introduction
  • 依赖注入
  • 作用域
  • 数据绑定
    • 控制器->模板->控制器->模板
  • 多个控制器
  • $scope对象
    • $apply方法、$digest方法
    • $watch方法
    • 示例:购物车
  • 模块和控制器
  • $provide对象的provider、factory、service方法
    • 多个控制器内共享数据
  • 过滤器(Filters)
    • number、currency、date
    • limitTo、lowercase、uppercase
    • filter、orderBy、json
    • 示例:产品列表
    • 自定义过滤器
  • 控制器(controller)
    • 显式和隐式依赖注入
  • 指令
    • Angular 内置指令
    • Angular 自定义指令
      • restrict、template、replace属性
      • templateUrl属性
      • transclude、priority、terminal属性
      • compile && link属性
      • controller && controllAs属性
      • require属性
      • scope属性
  • Module里其他方法
    • constant、value、run方法
  • Form表单
    • 示例:注册页
  • XHR和服务器端的通信
    • $http
  • JavaScript基础
    • .isFunction是否为函数
  • 资料链接
  • 功能组件
    • Tooltip
    • CSV
  • 其他
    • $watchCollection
    • $controller 继承
    • 两个对象合并
    • 页面关闭
    • AngularJs 时间格式化处理
    • 数据的本地存储
    • 页面的URL
Powered by GitBook
On this page
  • Form表单
  • 一般来讲表单可能遇到的问题
  • input type 扩展
  • input 属性
  • CSS样式
  • Form控制变量
  • 事件
  • From 方法
  • ng-model
  • ngModel里的属性

Was this helpful?

Form表单

Form表单

一般来讲表单可能遇到的问题

  1. 如何数据绑定

  2. 验证表单

  3. 显示出错信息

  4. 整个Form的验证

  5. 避免提交没有验证通过的表单

  6. 防止多次提交

input type 扩展

  • number

  • url

  • password

  • email

  • reset

input 属性

  • name 名字

  • ng-model 绑定的数据

  • ng-required 是否必填

  • ng-minlength 最小长度

  • ng-maxlength 最大长度

  • ng-pattern 匹配模式

  • ng-change 值变化时的回调

CSS样式

  • ng-valid 当表单验证通过时的设置

  • ng-invalid 表单验证失败时的设置

  • ng-pristine 表单的未被动之前拥有

  • ng-dirty 表单被动过之后拥有

Form控制变量

  • 字段是否未更改

    formName.inputFieldName.$pristine

  • 字段是否更改

    formName.inputFieldName.$dirty

  • 字段有效

    formName.inputFieldName.$valid

  • 字段无效

    formName.inputFieldName.$invalid

  • 字段错误信息

    formName.inputfieldName.$error

事件

AngularJS提供可与HTML控件相关联的多个事件。例如ng-click通常与按钮相关联。以下是AngularJS支持的事件。

  • ng-click

  • ng-dbl-click

  • ng-mousedown

  • ng-mouseup

  • ng-mouseenter

  • ng-mouseleave

  • ng-mousemove

  • ng-mouseover

  • ng-keydown

  • ng-keyup

  • ng-keypress

  • ng-change

From 方法

  • $setPristine 将表单复位原始状态,class,$dirty,$pristine

ng-model

  • ng-model是angular原生的directive

  • 可以通过require ngModel 可以更深入的去处理数据的双向绑定

ngModel里的属性

  • $parsers属性 保存了从viewValue向modelValue绑定过程中的处理函数,它们将来会依次执行

  • $formatters 它保存的是从modelValue向viewValue绑定过程中的处理函数

  • $setViewValue 当view发生了某件事情时,从view向model绑定调用

    $setViewValue 把viewValue保存下来

  • $render 当模型发生变化时,应该怎么去更新视图,从model向view绑定,调用ctrl.$render⽅方法,将viewValue渲染到页面上

  • $setValidity 设置验证结果

  • $viewValue 视图的值

  • $modelValue 模型⾥里的值

Previousconstant、value、run方法Next示例:注册页

Last updated 6 years ago

Was this helpful?