Angularjs之表单实例（三）
正确引用js css文件后可运行
<!DOCTYPE html> <html ng-app='myApp'> <head> <title>Bootstrap navigator</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/angular.min.js"></script> </head> <body> <!--======================== 07表单 ============================ --> <!-- 1.简单表单 class="simple-form" *1.函数的定义(d)和用法(m) reset() 方法:(d)可把表单中的元素重置为它们的默认值。(m)formObject.reset() --> ================================================= <h3>1.简单表单 class="simple-form"</h3> ================================================= <div ng-controller="Controller"> <form novalidate class="simple-form"><!-- novalidate是用来屏蔽浏览器本身的验证功能 --> Name: <input type="text" ng-model="user.NaMe" /><br /> E-mail: <input type="email" ng-model="user.EmAil" /><br /> Gender: <input type="radio" ng-model="user.GenDer" value="male" />male <input type="radio" ng-model="user.GenDer" value="female" />female<br /> <button ng-click="reset()">RESET</button> <button ng-click="update(user)">SAVE</button> </form> <pre>form = {{user | json}}</pre> <pre>master = {{master | json}}</pre> </div> ================================================= <h3>2.css表单 class="css-form"</h3> ================================================= <!-- 2.css表单 class="css-form" --> <div ng-controller="Controller"> <form novalidate class="css-form"> Name: <input type="text" ng-model="user.name" required /><br /> E-mail: <input type="email" ng-model="user.email" required /><br /> Gender: <input type="radio" ng-model="user.gender" value="male" />male <input type="radio" ng-model="user.gender" value="female" />female<br /> <button ng-click="reset()">RESET</button> <button ng-click="update(user)">SAVE</button> </form> </div> <style type="text/css"> .css-form input.ng-invalid.ng-dirty { background-color: #FA787E; } .css-form input.ng-valid.ng-dirty { background-color: #78FA89; } div[contentEditable] {/*对contentEditable属性样式的设定方法*/ cursor: pointer; background-color: #D0D0D0; } button[ng-disabled] {/*对ng-disabled属性样式的设定方法*/ background-color: #FA787E; } </style> ================================================= <h3>3.根据表单状态或者表单元素状态绑定 </h3> <ol> <li> 只有当表单发生改变时，重置按钮才会被显示出来。</li> <li>只有当表单有改变并且改变的值都是合法的，保存按钮才会被显示出来。</li> <li> 能自定义user.email和user.agree的错误信息。</li> </ol> ================================================= <!-- 3.根据表单状态或者表单元素状态绑定 --> <div ng-controller="Controller"> <form name="form" class="css-form" novalidate> Name: <input type="text" ng-model="user.name" name="uName" required /><br /> E-mail: <input type="email" ng-model="user.email" name="uEmail" required/><br /> <div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">Invalid: <!--此div，如果form表中的name为uEmail的input元素中的内容违法或者是脏数据，那么就显示出来--> <span ng-show="form.uEmail.$error.required">Tell us your email.</span> <!-- 如果错误信息是由required引起的，就显示此span--> <span ng-show="form.uEmail.$error.email">This is not a valid email.</span> <!-- 如果错误信息是由里面的内容不合法引起的，就显示此span--> </div> Gender: <input type="radio" ng-model="user.gender" value="male" />male <input type="radio" ng-model="user.gender" value="female" />female<br /> <input type="checkbox" ng-model="user.agree" name="userAgree" required /> I agree: <input ng-show="user.agree" type="text" ng-model="user.agreeSign" required /><br /> <div ng-show="!user.agree || !user.agreeSign">Please agree and sign.</div> <button ng-click="reset()" ng-disabled="isUnchanged(user)">RESET</button> <button ng-click="update(user)" ng-disabled="form.$invalid || isUnchanged(user)">SAVE</button> </form> </div> ================================================= <h3>4.自定义验证 </h3> <ol> <li>模型到视图的更新中- 只要绑定的模型改变了，NgModelController#$formatters数组中的函数就会被轮流调用，所以每一个函数都有机会对数据进行格式化，当然你也可以通过NgModelController#$setValidity来改变表单的验证状态。</li> <li>视图到模型的更新中- 相同的，只要用户与表单交互了，NgModelController#$setViewValue就会被调用。 这次是NgModelController#$parsers数组中的函数会被依次调用，每个函数都有机会来改变值或者通过NgModelController#$setValidity来改变表单的验证状态</li> <li>第一个要验证的是输入是否是整数。例如，1.23就不是符合验证的值，因为它包含了分数部分。注意，我们是将验证数组中的项从头取出，而不是压入。这是因为我们要在输入值被改变（格式化）前，先验证输入的合法性</li> <li>第二个指令是一个“智能浮点(smart-float)”。它能把"1.2"或者"1,2"都转化为合法的浮点数"1.2"。注意，这里我们不能使用“数字输入类型”，因为H支持TML5的浏览器不允许用户输入像"1,2"这样的非法值</li> </ol> ================================================= <div ng-controller="Controller"> <form name="form" class="css-form" novalidate> <div> Size (integer 0 - 10): <input type="number" ng-model="size" name="size" min="0" max="10" integer />{{size}}<br /><!-- 自定义指令integer 和 smart-float --> <span ng-show="form.size.$error.integer">This is not valid integer!</span> <span ng-show="form.size.$error.min || form.size.$error.max"> The value must be in range 0 to 10!</span> </div> <div> Length (float): <input type="text" ng-model="length" name="length" smart-float /> {{length}}<br /> <span ng-show="form.length.$error.float"> This is not a valid float number!</span> </div> </form> </div> ================================================= <h3>5.自定义表单控件</h3> <ol> <li>实现render方法。这个方法负责在数据模型变化时，把变化的值传递给NgModelController#$formatters后，用来在view上渲染新的数据。</li> <li>在用户与控件交互并且模型需要被更新时，调用$setViewValue方法。这通常是在DOM的监听事件中完成的。</li> <li>如何添加一个“内容可编辑”的数据双向绑定的元素</li> </ol> ================================================= <div contentEditable="true" ng-model="content" title="Click to edit">Some</div> <pre>model = {{content}}</pre> <script> var app = angular.module('myApp', []); /*表单内容的保存与重置 自定义函数：Reset（）、update（）、isUnchange() */ app.controller('Controller', function($scope) { $scope.master= {}; $scope.update = function(user) { $scope.master= angular.copy(user); }; $scope.reset = function() { $scope.user = angular.copy($scope.master); }; $scope.isUnchanged = function(user) { return angular.equals(user, $scope.master); }; $scope.reset(); }); /*整数验证 1.函数的定义(d)和用法(m) test()方法:(d)用于检测一个字符串是否匹配某个模式. (m)RegExpObject.test(string) 返回值为true 或 false; */ var INTEGER_REGEXP = /^\-?\d*$/;/*整数的正则表达式：或者以"-"（负）开头，或者没有负号，后面都是正整数，包括0*/ app.directive('integer', function() { return { require: 'ngModel', link: function(scope, elm, attrs, ctrl) { ctrl.$parsers.unshift(function(viewValue) { if (INTEGER_REGEXP.test(viewValue)) { /* it is valid*/ ctrl.$setValidity('integer', true); return viewValue; } else { /* it is invalid, return undefined (no model update)*/ 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('contenteditable', function() {/*自定义指令：contenteditable*/ return { require: 'ngModel', link: function(scope, elm, attrs, ctrl) { /*view -> model*/ elm.bind('blur', function() {/*给元素绑定blur事件*/ scope.$apply(function() { ctrl.$setViewValue(elm.html());/*当输入结束后，焦点离开div元素时，就更新model*/ }); }); //model -> view ctrl.$render = function(value) { elm.html(value);/*更新视图view*/ }; /* load init value from DOM*/ ctrl.$setViewValue(elm.html()); } }; }); </script> </body> </html>
参考文章链接地址：http://www.linuxidc.com/Linux/2015-01/112574.htm http://angularjs.cn/A00t
