x-editable在angular中亲身使用小结

使用依赖

bootstrap-editable.css 和bootstrap-editable.min.js,同时还有bootstrap和jQuery

项目使用

基本使用(设置可编辑)

html (设置id)

<span id="text" ng-modul="text">这里是可编辑的文本span>

js (初始化)

$(function () {
         $.fn.editable.defaults.mode = 'inline';     //编辑模式,两种inline行内编辑,popup浮动编辑,默认是popup
         $.fn.editable.defaults.emptytext = 'null';  //设置空值时的文本
         $('#text').editable();   //跟上面的html元素的id对应上,决定是否可编辑
    });

注意点:html设置的id和js设置的id要相互对应即可编辑

1.文本框(可设置参数)

简单使用,不需要参数即可编辑文本框

$(function () {
         $('#text').editable();
    });

复杂使用,可设置参数editable(),括号里面设置对象键值对即可

$(function () {
        $('#username').editable({
            type: "text",                //编辑框的类型
            title: "用户名",              //编辑框的标题
            disabled: false,             //是否禁用编辑
            emptytext: "空文本",          //空值的默认文本
            validate: function (value) { //字段验证
                if (!$.trim(value)) {
                    return '不能为空';
                }
            }
        });

    });

2.下拉框使用

下拉框较为复杂,下面介绍的为在angular项目中使用的下拉框逻辑
下面为举例的例子,设id=”THESEASON” , ng-model=”THESEASON” 还有默认值{{THESEASONLIST}},如果看不懂这3个值什么意思的话,接着往下看

<span id="THESEASON" ng-model="THESEASON" >{{THESEASONLIST}}span>

在js的逻辑处理

$('#THESEASON').editable({
       type: "select",                   //编辑框的类型下拉框
       defaultValue: $scope.THESEASONID,   //解决点击后默认为空的问题,设置defaultValue
       source: $scope.THESEASONLIST,       //下拉框的数据
       url: function (parmas) {          //动态获取每一次点击后的值
            $scope.theseason1 = parmas.value;
        }
          });                                                                                    

下面详细解释下,上面4个参数的使用
(1)下拉框的类型(type)
type为编辑的类型,可选择text.select,munber等类型

(2)下拉框的数据(source)

$scope.THESEASONLIST = [{ value: "1", text: "春" }, { value: "2", text: "夏" }, { value: "3", text: "秋" }, { value: "4", text: "冬" }];

下拉框的数据要设置为上面所示的数据格式数组对象,上面的text为决定下拉框的看到的值
让source等于数组对象$scope.THESEASONLIST,这个插件会自动的找到每一个数组元素中的text值,将它显示出来

(3)动态获取每一次点击后的值(url)

url: function (parmas) {    
           console.log(parmas)
        }

可以试试打印下parmas,这个parmas为你下拉后选择的数组$scope.THESEASONLIST中的对应的元素也就是对象

(4)获得文本默认值(defaultValue)
设置这个是为了解决,点击编辑时出现空白,然后点击下拉才有下拉值
这个好解决,只要在数组 $scope.THESEASONLIST 中设置唯一和text对应的值,如下

//数据设置如下
$scope.THESEASONLIST = [{ value: "1", text: "春" }, { value: "2", text: "夏" }, { value: "3", text: "秋" }, { value: "4", text: "冬" }];

//然后让defaultValue等于数组中默认text值对应的value值即可
defaultValue: $scope.THESEASONID

获取编辑后的值

两种方式

(1)$scope.TEXT= $("#text").editable('getValue', true);
(2)$scope.TEXT= $("#text").text();

两种方法都可以使用