angualarjsdemo

AngularJs学习笔记--Forms

原版地址：http://code.angularjs.org/1.0.2/docs/guide/forms

 

　　控件（input、select、textarea）是用户输入数据的一种方式。Form（表单）是这些控件的集合，目的是将相关的控件进行分组。

　　表单和控件提供了验证服务，所以用户可以收到无效输入的提示。这提供了更好的用户体验，因为用户可以立即获取到反馈，知 道如何修正错误。请记住，虽然客户端验证在提供良好的用户体验中扮演重要的角色，但是它可以很简单地被绕过，因此，客户端验证是不可信的。服务端验证对于 一个安全的应用来说仍然是必要的。

一、Simple form

　　理解双向数据绑定的关键directive是ngModel。ngModel提供了从model到view和view到model的双向数据绑定。并且，它还向其他directive提供API，增强它们的行为。

二、Using CSS classes

　　为了让form以及控件、ngModel富有样式，可以增加以下class：

  • ng-valid
  • ng-invalid
  • ng-pristine（从未输入过）
  • ng-dirty（输入过）

　　下面的例子，使用CSS去显示每个表单控件的有效性。例子中，user.name和user.email都是必填的，但当它们修改过之后（dirty），背景将呈现红色。这确保用户不会直到与表单交互之后（提交之后？），发现未能满足其有效性，才为一个错误而分心。

复制代码
<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="CSSClasses"> <head> <meta charset="UTF-8"> <title>CSSClasses</title> <style type="text/css"> .ng-cloak { display: none; } .css-form input.ng-invalid.ng-dirty { background-color: #fa787e; } .css-form input.ng-valid.ng-dirty { background-color: #78fa89; } </style> </head> <body> <div ng-controller="MyCtrl" class="ng-cloak"> <form novalidate class="css-form" name="formName"> 名字: <input ng-model="user.name" type="text" required><br/> Email: <input ng-model="user.email" type="email" required><br/> 性别: <input value="男" ng-model="user.gender" type="radio">男 <input value="女" ng-model="user.gender" type="radio">女 <br/> <button ng-click="reset()">RESET</button> <button ng-click="update(user)">SAVE</button> </form> <pre>form = {{user | json}}</pre> <pre>saved = {{saved | json}}</pre> </div> <script src="../angular-1.0.1.js" type="text/javascript"></script> <script type="text/javascript"> var app = angular.module("CSSClasses", []); app.controller("MyCtrl", function ($scope,$window) { $scope.saved = {}; $scope.update = function(user) { $scope.saved = angular.copy(user); }; $scope.reset = function() { $scope.user = angular.copy($scope.saved); }; $scope.reset(); //不合法的值将不会进入user  }); </script> </body> </html>
复制代码

 

三、Binding to form and control state

　　在angular中，表单是FormController的一个实例。表单实例可以随意地使用name属性暴露到scope中（这里没看懂，scope里面没有一个跟form的name属性一直的property，但由于有“document.表单名”这种方式，所以还是可以获取到的）。相似地，控件是NgModelController的实例。控件实例可以相似地使用name属性暴露在form中。这说明form和控件（control）两者的内部属性对于使用标准绑定实体（standard binding primitives）绑定在视图中的这个做法是可行的。

　　这允许我们通过以下特性来扩展上面的例子：

  • RESET按钮仅仅在form发生改变之后才可用。
  • SAVE按钮仅仅在form发生改变而且输入有效的情况下可用。
  • 为user.email和user.agree定制错误信息。
复制代码
<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="ControlState"> <head> <meta charset="UTF-8"> <title>ControlState</title> <style type="text/css"> .ng-cloak { display: none; } .css-form input.ng-invalid.ng-dirty { background-color: #fa787e; } .css-form input.ng-valid.ng-dirty { background-color: #78fa89; } </style> </head> <body> <div ng-controller="MyCtrl" class="ng-cloak"> <form novalidate class="css-form" name="formName"> 名字: <input ng-model="user.name" name="userName" type="text" required><br/> <div ng-show="formName.userName.$dirty&&formName.userName.$invalid"> <span>请填写名字</span> </div> Email: <input ng-model="user.email" name="userEmail" type="email" required><br/> <div ng-show="formName.userEmail.$dirty && formName.userEmail.$invalid">提示: <span ng-show="formName.userEmail.$error.required">请填写Email</span> <span ng-show="formName.userEmail.$error.email">这不是一个有效的Email</span> </div> 性别: <input value="男" ng-model="user.gender" type="radio">男 <input value="女" ng-model="user.gender" type="radio">女 <br/> <input type="checkbox" ng-model="user.agree" name="userAgree" required/>我同意： <input type="text" ng-show="user.agree" ng-model="user.agreeSign" required/> <br/> <div ng-show="!formName.userAgree || !user.agreeSign">请同意并签名~</div> <button ng-click="reset()" ng-disabled="isUnchanged(user)">RESET</button> <button ng-click="update(user)" ng-disabled="formName.$invalid || isUnchanged(user)">SAVE</button> </form> <pre>form = {{user | json}}</pre> <pre>saved = {{saved | json}}</pre> </div> <script src="../angular-1.0.1.js" type="text/javascript"></script> <script type="text/javascript"> var app = angular.module("ControlState", []); app.controller("MyCtrl", function ($scope,$window) { $scope.saved = {}; $scope.update = function(user) { $scope.saved = angular.copy(user); }; $scope.reset = function() { $scope.user = angular.copy($scope.saved); }; $scope.isUnchanged = function(user) { return angular.equals(user, $scope.saved); }; $scope.reset(); //不合法的值将不会进入user }); </script> </body> </html>
复制代码

 

四、Custom Validation

　　angular为大多数公共的HTML表单域（input，text,number,url,email,radio,checkbox）类型提供了实现，也有一些为了表单验证的directive（required，pattern,，inlength，maxlength，min，max）。

　　可以通过定义增加定制验证函数到ngModel controller（这里是连在一起的ngModelController吗？）中的directive来定义我们自己的验证插件。为了得到一个controller，directive如下面的例子那样指定了依赖（directive定义对象中的require属性）。

  • Model到View更新 - 无论什么时候Model发生改变，所有在ngModelController.$formatters（当model发生改变时触发数据有效性验证和格式化转换）数组中的function将排队执行，所以在这里的每一个function都有机会去格式化model的值，并且通过NgModelController.$setValidity（http://code.angularjs.org/1.0.2/docs/api/ng.directive:ngModel.NgModelController#$setValidity）修改控件的验证状态。
  • View到Model更新 - 一个相似的方式，无论任何时候，用户与一个控件发生交互，将会触发NgModelController.$setViewValue。这时候轮到执行NgModelController$parsers（当控件从DOM中取得值之后，将会执行这个数组中所有的方法，对值进行审查过滤或转换，也进行验证）数组中的所有方法。

　　在下面的例子中我们将创建两个directive。

  • 第一个是integer，它负责验证输入到底是不是一个有效的整数。例如1.23是一个非法的值，因为它包含小数部分。注意，我们通过在数组头部插入（unshift）来代替在尾部插入（push），这因为我们想它首先执行并使用这个控件的值（估计这个Array是当作队列来使用的），我们需要在转换发生之前执行验证函数。
  • 第二个directive是smart-float。他将”1.2”和”1,2”转换为一个合法的浮点数”1.2”。注意，我们在这不可以使用HTML5的input类型”number”，因为浏览器不允许用户输入我们预期的非法字符，如”1,2”（它只认识”1.2”）。
复制代码
<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="CustomValidation"> <head> <meta charset="UTF-8"> <title>CustomValidation</title> <style type="text/css"> .ng-cloak { display: none; } .css-form input.ng-invalid.ng-dirty { background-color: #fa787e; } .css-form input.ng-valid.ng-dirty { background-color: #78fa89; } </style> </head> <body> <div class="ng-cloak"> <form novalidate class="css-form" name="formName"> <div> 大小(整数 0 - 10):<input integer type="number" ng-model="size" name="size" min="0" max="10"/>{{size}}<br/> <span ng-show="formName.size.$error.integer">这不是一个有效的整数</span> <span ng-show="formName.size.$error.min || formName.size.$error.max"> 数值必须在0到10之间 </span> </div> <div> 长度（浮点数）： <input type="text" ng-model="length" name="length" smart-float/> {{length}}<br/> <span ng-show="formName.length.0error.float">这不是一个有效的浮点数</span> </div> </form> </div> <script src="../angular-1.0.1.js" type="text/javascript"></script> <script type="text/javascript"> var app = angular.module("CustomValidation", []); var INTEGER_REGEXP = /^\-?\d*$/; app.directive("integer", function () { return { require:"ngModel",//NgModelController  link:function(scope,ele,attrs,ctrl) { ctrl.$parsers.unshift(function (viewValue) {//$parsers，View到Model的更新 if(INTEGER_REGEXP.test(viewValue)) { //合格放心肉 ctrl.$setValidity("integer", true); return viewValue; }else { //私宰肉…… ctrl.$setValidity("integer", false); return undefined; } }); } }; }); var FLOAT_REGEXP = /^\-?\d+(?:[.,]\d+)?$/; app.directive("smartFloat", function () { return { require:"ngModel", link:function(scope,ele,attrs,ctrl) { ctrl.$parsers.unshift(function(viewValue) { if(FLOAT_REGEXP.test(viewValue)) { ctrl.$setValidity("float", true); return parseFloat(viewValue.replace(",", ".")); }else { ctrl.$setValidity("float", false); return undefined; } }); } } }); </script> </body> </html>
复制代码

 

五、Implementing custom form control (using ngModel)

　　angular实现了所有HTML的基础控件（input，select，textarea），能胜任大多数场景。然而，如果我们需要更加灵活，我们可以通过编写一个directive来实现自定义表单控件的目的。

　　为了制定控件和ngModel一起工作，并且实现双向数据绑定，它需要：

  • 实现render方法，是负责在执行完并通过所有NgModelController.$formatters方法后，呈现数据的方法。
  • 调用$setViewValue方法，无论任何时候用户与控件发生交互，model需要进行响应的更新。这通常在DOM事件监听器里实现。

　　可以查看$compileProvider.directive（http://www.cnblogs.com/lcllao/archive/2012/09/09/2677190.html）获取更多信息。

　　下面的例子展示如何添加双向数据绑定特性到可以编辑的元素中。

 

复制代码
<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="CustomControl"> <head> <meta charset="UTF-8"> <title>CustomControl</title> <style type="text/css"> .ng-cloak { display: none; } div[contenteditable] { cursor: pointer; background-color: #D0D0D0; } </style> </head> <body ng-controller="MyCtrl"> <div class="ng-cloak"> <div contenteditable="true" ng-model="content" title="点击后编辑">My Little Dada</div> <pre>model = {{content}}</pre> <button ng-click="reset()">reset model tirgger model to view($render)</button> </div> <script src="../angular-1.0.1.js" type="text/javascript"></script> <script type="text/javascript"> var app = angular.module("CustomControl", []); app.controller("MyCtrl", function ($scope) { $scope.reset = function() { $scope.content = "My Little Dada"; //在这里如何获取NgModelController呢？如果你们知道，希望可以指点指点！谢谢  }; }); app.directive("contenteditable", function () { return { require:"ngModel", link:function (scope, ele, attrs, ctrl) { //view -> model  ele.bind("blur keyup",function() { scope.$apply(function() { console.log("setViewValue"); ctrl.$setViewValue(ele.text()); }); }); //model -> view  ctrl.$render = function(value) { console.log("render"); ele.html(value); }; //读取初始值  ctrl.$setViewValue(ele.text()); } }; }); </script> </body> </html>

转载于:https://www.cnblogs.com/Jerry-spo/p/5689692.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/271319.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Java中Comparator比较器的使用以及使用lamba简化代码

Java中Comparator比较器的使用以及使用lamba简化代码

代码例子&#xff1a; /*** 测试Comparator*/Testpublic void test17() {//原始方法Comparator<Integer> comparator new Comparator<Integer>() {Overridepublic int compare(Integer o1, Integer o2) {return Integer.compare(o1, o2);}};int compare1 compara…
阅读更多...
数据库技术基础：数据库管理系统的功能介绍笔记

数据库技术基础：数据库管理系统的功能介绍笔记

1、DBMS功能介绍1.1 数据定义数据库定义语言&#xff08;DDL&#xff09;&#xff1a;可以对数据库结构描述&#xff0c;包括外模式、模式、内模式的定义&#xff1b;数据库完整性定义&#xff1b;安全保密定义比如口令、级别和存取权限。这些定义存储在数据字典中是DBMS运行的…
阅读更多...
charles乱码_基于iOS的Charles抓包实践

charles乱码_基于iOS的Charles抓包实践

奇技指南在应用开发过程中&#xff0c;通过抓包调试服务端接口的场景时常出现。Charles和Wireshark是开发过程中最常用的两款软件。那么今天&#xff0c;让我们以iOS为例&#xff0c;聊一聊Charles抓包。本文来自360奇舞团QiShare团队投稿。在日常开发中&#xff0c;我们无法看…
阅读更多...
那些程序员爆笑段子，扎心了…

那些程序员爆笑段子，扎心了…

1、特殊“2020是属于程序员的一年。”“怎么说&#xff1f;”“2020-1024996。”2、真相“你们程序员是不是没见过下班时候的太阳&#xff1f;”“也不是啦&#xff0c;夏天的时候还是能看到的。”“哦哦&#xff0c;夏天黑得比较晚。”“不是&#xff0c;是天亮得比较早。”3、…
阅读更多...
lambda中sorted排序

lambda中sorted排序

准备工作&#xff0c;新建一个User类 使用stream排序操作&#xff08;默认ASC排序) stream倒序排序操作 sorted(Comparator.reverseOrder()) 代码例子&#xff1a; /*** lambda* sorted排序*/Testpublic void test19() {List<Integer> list new ArrayList<>();…
阅读更多...
python中的括号不是西文吗_二级Python---python语言的基本语法元素（Day1）

python中的括号不是西文吗_二级Python---python语言的基本语法元素（Day1）

一、基本输入输出函数Python中有三个重要的基本输入、输出函数&#xff0c;用于输入、转换和输出&#xff0c;分别是input()、eval()、print()。1.print()作用&#xff1a;输出运算结果&#xff1b;根据输出内容的不同&#xff0c;有三种用法。①、仅用于输出字符串&#xff0c…
阅读更多...
chart.js 饼图显示百分比_实战PyQt5: 135-数据可视化之QChart绘制饼图

chart.js 饼图显示百分比_实战PyQt5: 135-数据可视化之QChart绘制饼图

饼图是数据可视图表的基本类型&#xff0c;在QChart中&#xff0c;QPieSeries, QPieSlice处理饼图的绘制。QPieSeriesQPieSeries类以饼图形式显示数据。饼图系列由定义为QPieSlice对象的切片组成。切片可以具有任何值&#xff0c;因为QPieSeries对象计算切片的百分比与系列中所…
阅读更多...
lambda中使用filter过滤

lambda中使用filter过滤

单一条件过滤 /*** 测试filter*/Testpublic void testFilter() {List<User> user new ArrayList<>();user.add(new User(1L, 18, "小明"));user.add(new User(2L, 20, "小王"));user.add(new User(3L, 28, "小刚"));user.add(new U…
阅读更多...
Silverlight 打印

Silverlight 打印

摘自&#xff1a;http://www.cnblogs.com/jiajiayuan/archive/2012/04/13/2444246.html Silverlight中的打印只有一个类&#xff0c;那就是PrintDocment这个对象来实现。下面我用两种方法来实现Silverlight的打印&#xff1a;第一种&#xff1a; private void btnPrint_Click(o…
阅读更多...
数据库系统的体系结构知识笔记

数据库系统的体系结构知识笔记

1、集中式数据库系统分时系统环境下的集中式数据库系统结构诞生于20世纪60年代中期。当时的硬件和操作系统决定了分时系统环境下的集中式数据库系统构成早期的数据库技术的首选结构。数据和数据管理都是集中的&#xff0c;数据库系统的所有系统&#xff0c;从形式的用户到DBMS核…
阅读更多...
mysql2014授权设置_mysql权限管理（2014-09-15）

mysql2014授权设置_mysql权限管理（2014-09-15）

本文比较碎片化&#xff0c;不过以问答的形式比较容易理解。如何查看mysql的当前登录的用户&#xff1f;select user();mysql -hlocalhost -uroot 与root192.168.11.100 区别&#xff1f;mysql -hlocalhost -uroot只能在本地进行登录&#xff0c;而root192.168.11.100不能在本…
阅读更多...
python网站后台_Python 网站后台扫描脚本

python网站后台_Python 网站后台扫描脚本

Python 网站后台扫描脚本1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 #!/usr/bin/python #codingutf-8 import sys import urllib import time url "http://123.207.123.228/" txt open(r"C:\Users\ww\Desk…
阅读更多...
数据库系统的三级模式结构知识笔记

数据库系统的三级模式结构知识笔记

1、数据抽象的三个层次数据库系统利用三个层次划分来抽象来对用户屏蔽系统的复杂性、简化用户与系统的交互。1.1 物理层物理层属于最低级层次的抽象&#xff0c;描述数据在存储器上如何进行存储的。物理层会详细描述复杂的底层结构。1.2 逻辑层逻辑层属于中间层&#xff0c;用来…
阅读更多...
Arrays.sort()排序

Arrays.sort()排序

/*** Arrays.sort()排序* 默认升序*/Testpublic void test(){Integer[] result {1,4,7,9};Arrays.sort(result);for (int i 0;i<result.length;i)System.out.println(i);}
阅读更多...
import package的问题

import package的问题

在新建class的时候除了名字还可以选择包名&#xff1a; 新建2个包名&#xff0c;然后在不同的包里写2个同名的类&#xff0c; 程序中导入另外一个包 package com.hs;import com.hy.Father; 当直接使用Father的时候提示是引用的com.hy.Father public static void main(String[] …
阅读更多...
数据库技术基础：常见基本模型介绍笔记

数据库技术基础：常见基本模型介绍笔记

1、层次模型层次模型采用树型结构表示数据与数据间的联系。层次模型中每个节点表示一个实体&#xff0c;实体之间的联系用节点之间的连线表示&#xff0c;并且除了根节点以外&#xff0c;其他节点有且仅有一个双亲节点。层次模型特点&#xff1a;记录之间的联系通过指针实现&am…
阅读更多...
升序

升序

/*** 升序*/Testpublic void test25() {List<Integer> array Stream.of(1, 8, 5, 3).collect(toList());// 升序排序array.sort(Integer::compareTo);System.out.println(array);}
阅读更多...
数据库技术：数据存储和查询知识笔记

数据库技术：数据存储和查询知识笔记

1、存储管理器存储管理器作用&#xff1a;负责数据库中数据的存查询和更新。存储管理器负责和文件系统交互&#xff0c;将不同的DML语句翻译成底层文件系统命令&#xff0c;通过这种方式原始数据就通过文件系统存储在磁盘上。存储管理器是存储底层数据和应用程序、以及向数据库…
阅读更多...
lambda中orElse(null)使用

lambda中orElse(null)使用

如果取得第一个元素&#xff0c;则用findFirst() 最后提取元素的时候&#xff0c;可以用&#xff1a;get或者orElse(null) 这里要注意的是&#xff0c;规范用法是orElse(null) 用get方法&#xff0c;如果filter中获取的是null&#xff0c;那么用get方法会抛出异常&#xff1…
阅读更多...
数据挖掘：数据仓库相关知识笔记

数据挖掘：数据仓库相关知识笔记

1、数据仓库介绍数据仓库&#xff08;DW&#xff09;&#xff1a;可以满足管理人员的决策分析需要&#xff0c;在数据库基础上产生了满足决策分析需要的数据环境。传统数据库和数据仓库比较比较内容传统数据库数据仓库数据内容当前数据历史的、存档的、归纳的、计算的数据目标面…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023