angularjs表单进阶


AngularJS Form 进阶:远程校验和自定义输入 项 大漠穷秋 本节修订了官方提供的2个例子(因为官方的例子特么有Bug!)。实例一用来示范如何用地道的 Angular代码进行远程表单校验;实例二示范如何自定义表单中的输入项。 表单远程校验 HTML代码:
整数(0-10): {{size}}
不是合法的整数! 数值必须位于0到10之间!
浮点数: {{length}}
不是合法的浮点数!
远程校验: {{remote}}
非法数据! AngularJS表单进阶 file:///G:/PrivateArchives/我的文章/AngularJS/Angular... 第1页 共5页 2013-08-06 星期二 16:14
JS代码: var app = angular.module('form-example1', []); var INTEGER_REGEXP = /^\-?\d*$/; app.directive('integer', function() { return { require : 'ngModel', link : function(scope, elm, attrs, ctrl) { ctrl.$parsers.unshift(function(viewValue) { 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, elm, 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; } }); } }; }); app.directive('remoteValidation', function($http) { return { require : 'ngModel', link : function(scope, elm, attrs, ctrl) { elm.bind('keyup', function() { AngularJS表单进阶 file:///G:/PrivateArchives/我的文章/AngularJS/Angular... 第2页 共5页 2013-08-06 星期二 16:14 $http({method: 'GET', url: 'FormValidation.jsp'}). success(function(data, status, headers, config) { if(parseInt(data)==0){ ctrl.$setValidity('remote',true); }else{ ctrl.$setValidity('remote',false); } }). error(function(data, status, headers, config) { ctrl.$setValidity('remote', false); }); }); } }; }); 后台JSP代码: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% //随机成功或者失败! double d=Math.random(); if(d>0.5){ response.getWriter().write("0"); }else{ response.getWriter().write("1"); } %> 运行效果: AngularJS表单进阶 file:///G:/PrivateArchives/我的文章/AngularJS/Angular... 第3页 共5页 2013-08-06 星期二 16:14 第三个例子示范远程表单校验,代码比较简单,请自己仔细看(注意是如何注入$http服务的)。 自定义输入项 HTML代码:
Some
model = {{content}}
JS代码: angular.module('form-example2', []).directive('contenteditable', function() { return { require : 'ngModel', link : function(scope, elm, attrs, ctrl) { // view -> model elm.bind('keyup', function() { scope.$apply(function() { ctrl.$setViewValue(elm.text()); }); }); // model -> view ctrl.$render = function() { elm.html(ctrl.$viewValue); }; // load init value from DOM ctrl.$setViewValue(elm.html()); } AngularJS表单进阶 file:///G:/PrivateArchives/我的文章/AngularJS/Angular... 第4页 共5页 2013-08-06 星期二 16:14 }; }); 运行效果: 这个例子是从官方的文档修改而来。 使用这种方式可以用DIV来模拟input,从而可以定义出绚丽的表单效果。 版权申明 保留所有权利,未经作者许可不得进行转载、修改等操作。 AngularJS表单进阶 file:///G:/PrivateArchives/我的文章/AngularJS/Angular... 第5页 共5页 2013-08-06 星期二 16:14
还剩4页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 10 金币 [ 分享pdf获得金币 ] 0 人已下载

下载pdf

pdf贡献者

socole

贡献于2016-11-30

下载需要 10 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf