x-editable在angular中亲身使用小结
来源:互联网 发布:数据通讯设备 编辑:程序博客网 时间:2024/05/21 10:21
使用依赖
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();
两种方法都可以使用
- x-editable在angular中亲身使用小结
- bootstrap--table,select2及x-editable的使用小结
- x-editable使用小结——用于网页文本即时编辑
- x-editable
- 在Angular中使用promise
- bootstarpTable中有关editable的使用
- bootstrap-table-editable 小结
- x-editable href问题
- x-editable教程
- 在angular应用中使用HTML组件
- 在Angular项目中使用PrimeNG组件
- 如何在Angular中使用jquery
- 在Angular框架中使用TinyMCE在线编辑器
- angular中使用a标签在PC端下载文件
- 在NativeScript-angular应用中使用本地设备剪切板
- 在Angular-cli中使用Pug(Jade)模板
- 在Angular指令中使用NgModelController做数据绑定
- Angular 中 setInterval 使用
- WGS84经纬度坐标6度分带高斯投影正算
- java计算工作日方法
- C++ string字符串
- JSTL(fn函数)
- PHP每15分钟自动更新网站地图,减少服务器消耗!
- x-editable在angular中亲身使用小结
- Android TextView属性大全
- RabbitMQ开机自启动脚本
- 第十一周项目三C/C++图遍历算法实现
- 人脸检测-opencv_haar
- 【android】5、清单文件
- spark rpc远程调用基础
- angularjs 点击查询按钮模糊过滤器
- 框架开发中处理异步操作的方式,善用回调函数。