前言

由于项目需要做了一个基于angularjs的文本控件，支持在可编辑状态和只读状态间的切换。

效果展示

数字:
代码： 
<ng-text model-type="number"  e-Width="80" blur="blur(value);"  ng-model="time.start"></ng-text>
非空 :
代码： 
<ng-text require="必须要填啊"  e-Width="80" blur="blur(value);"  ng-model="time2"></ng-text>

控制器代码

demo controller: 
angular.module('ngTest',['ngText']);    
angular.module('ngTest').controller('ctrl',['$scope',function($scope){
    $scope.time = "aa";
    $scope.time2 = "";
    $scope.blur = function(value){
        console.info("blur : " +value);
    }
    
}]);

需要

  • jquery.js v1.11 +
    http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js
  • angular.js v1.3 +
    http://cdn.bootcss.com/angular.js/1.3.0/angular.min.js
  • layer.js v2.1 + （修改过源码，请从本站下载）
    点击这里
  • ng-text.js v1.0 +
    js :点击这里 ; css :点击这里

一些说明

  1. 使用'require="必须要填哦"'或者'require' 使表单成为必填项;并且可以指定'submit-btn-id'的属性为表单提交按钮的id。

  2. 使用tip-direction="1" 设置错误提示弹出方向，1、2、3、4 分别代码上、右、下、左.

  3. 使用model-type="number" 控制表单为只能输入数字

  4. 使用e-Width="80" 设置input的宽度

  5. 使用blur="blur(value);" 指定失去焦点事件函数