濮阳新闻综合频道网站,国外最受欢迎的网站,北京新情况最新消息今天,关键词挖掘工具网站AngularJs学习笔记--Forms 原版地址#xff1a;http://code.angularjs.org/1.0.2/docs/guide/forms 控件#xff08;input、select、textarea#xff09;是用户输入数据的一种方式。Form#xff08;表单#xff09;是这些控件的集合#xff0c;目的是将相关的控件进行分组…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-validng-invalidng-pristine从未输入过ng-dirty输入过 下面的例子使用CSS去显示每个表单控件的有效性。例子中user.name和user.email都是必填的但当它们修改过之后dirty背景将呈现红色。这确保用户不会直到与表单交互之后提交之后发现未能满足其有效性才为一个错误而分心。 !DOCTYPE HTML
html langzh-cn ng-appCSSClasses head meta charsetUTF-8 titleCSSClasses/title style typetext/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-controllerMyCtrl classng-cloak form novalidate classcss-form nameformName 名字: input ng-modeluser.name typetext requiredbr/ Email: input ng-modeluser.email typeemail requiredbr/ 性别: input value男 ng-modeluser.gender typeradio男 input value女 ng-modeluser.gender typeradio女 br/ button ng-clickreset()RESET/button button ng-clickupdate(user)SAVE/button /form preform {{user | json}}/pre presaved {{saved | json}}/pre /div script src../angular-1.0.1.js typetext/javascript/script script typetext/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 langzh-cn ng-appControlState head meta charsetUTF-8 titleControlState/title style typetext/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-controllerMyCtrl classng-cloak form novalidate classcss-form nameformName 名字: input ng-modeluser.name nameuserName typetext requiredbr/ div ng-showformName.userName.$dirtyformName.userName.$invalid span请填写名字/span /div Email: input ng-modeluser.email nameuserEmail typeemail requiredbr/ div ng-showformName.userEmail.$dirty formName.userEmail.$invalid提示: span ng-showformName.userEmail.$error.required请填写Email/span span ng-showformName.userEmail.$error.email这不是一个有效的Email/span /div 性别: input value男 ng-modeluser.gender typeradio男 input value女 ng-modeluser.gender typeradio女 br/ input typecheckbox ng-modeluser.agree nameuserAgree required/我同意 input typetext ng-showuser.agree ng-modeluser.agreeSign required/ br/ div ng-show!formName.userAgree || !user.agreeSign请同意并签名~/div button ng-clickreset() ng-disabledisUnchanged(user)RESET/button button ng-clickupdate(user) ng-disabledformName.$invalid || isUnchanged(user)SAVE/button /form preform {{user | json}}/pre presaved {{saved | json}}/pre /div script src../angular-1.0.1.js typetext/javascript/script script typetext/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表单域inputtext,number,url,email,radio,checkbox类型提供了实现也有一些为了表单验证的directiverequiredpattern,inlengthmaxlengthminmax。 可以通过定义增加定制验证函数到ngModel controller这里是连在一起的ngModelController吗中的directive来定义我们自己的验证插件。为了得到一个controllerdirective如下面的例子那样指定了依赖directive定义对象中的require属性。 Model到View更新 - 无论什么时候Model发生改变所有在ngModelController.$formatters当model发生改变时触发数据有效性验证和格式化转换数组中的function将排队执行所以在这里的每一个function都有机会去格式化model的值并且通过NgModelController.$setValidityhttp://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 langzh-cn ng-appCustomValidation head meta charsetUTF-8 titleCustomValidation/title style typetext/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 classng-cloak form novalidate classcss-form nameformName div 大小(整数 0 - 10):input integer typenumber ng-modelsize namesize min0 max10/{{size}}br/ span ng-showformName.size.$error.integer这不是一个有效的整数/span span ng-showformName.size.$error.min || formName.size.$error.max 数值必须在0到10之间 /span /div div 长度浮点数 input typetext ng-modellength namelength smart-float/ {{length}}br/ span ng-showformName.length.0error.float这不是一个有效的浮点数/span /div /form /div script src../angular-1.0.1.js typetext/javascript/script script typetext/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) {//$parsersView到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的基础控件inputselecttextarea能胜任大多数场景。然而如果我们需要更加灵活我们可以通过编写一个directive来实现自定义表单控件的目的。 为了制定控件和ngModel一起工作并且实现双向数据绑定它需要 实现render方法是负责在执行完并通过所有NgModelController.$formatters方法后呈现数据的方法。调用$setViewValue方法无论任何时候用户与控件发生交互model需要进行响应的更新。这通常在DOM事件监听器里实现。 可以查看$compileProvider.directivehttp://www.cnblogs.com/lcllao/archive/2012/09/09/2677190.html获取更多信息。 下面的例子展示如何添加双向数据绑定特性到可以编辑的元素中。 !DOCTYPE HTML
html langzh-cn ng-appCustomControl head meta charsetUTF-8 titleCustomControl/title style typetext/css .ng-cloak { display: none; } div[contenteditable] { cursor: pointer; background-color: #D0D0D0; } /style /head body ng-controllerMyCtrl div classng-cloak div contenteditabletrue ng-modelcontent title点击后编辑My Little Dada/div premodel {{content}}/pre button ng-clickreset()reset model tirgger model to view($render)/button /div script src../angular-1.0.1.js typetext/javascript/script script typetext/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
