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

posted @ 2015-10-17 22:47  *润物无声*  阅读(370)  评论(0编辑  收藏  举报