angularjs 动态表单, 原生事件中调用angular方法
Posted 固始县钱成_WEB前端工程师
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angularjs 动态表单, 原生事件中调用angular方法相关的知识，希望对你有一定的参考价值。
一、json数据页面展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.1/jquery.js"></script> <style > .json-document { padding: 1em 2em; } ul.json-dict, ol.json-array { list-style-type: none; margin: 0 0 0 1px; border-left: 1px dotted #ccc; padding-left: 2em; } .json-string { color: #0B7500; } .json-literal { color: #1A01CC; font-weight: bold; } a.json-toggle { position: relative; color: inherit; text-decoration: none; } a.json-toggle:focus { outline: none; } a.json-toggle:before { font-size: 1.1em; color: #c0c0c0; content: "\\25BC"; position: absolute; display: inline-block; width: 1em; text-align: center; line-height: 1em; left: -1.2em; } a.json-toggle:hover:before { color: #aaa; } a.json-toggle.collapsed:before { transform: rotate(-90deg); } a.json-placeholder { color: #aaa; padding: 0 1em; text-decoration: none; } a.json-placeholder:hover { text-decoration: underline; } </style> </head> <body> <div id="aaa"></div> </body> </html> <script> (function ($) { function isCollapsable(arg) { return arg instanceof Object && Object.keys(arg).length > 0; } function isUrl(string) { var urlRegexp = /^(https?:\\/\\/|ftps?:\\/\\/)?([a-z0-9%-]+\\.){1,}([a-z0-9-]+)?(:(\\d{1,5}))?(\\/([a-z0-9\\-._~:/?#[\\]@!$&\'()*+,;=%]+)?)?$/i; return urlRegexp.test(string); } function json2html(json, options) { var html = \'\'; if (typeof json === \'string\') { json = json .replace(/&/g, \'&\') .replace(/</g, \'<\') .replace(/>/g, \'>\') .replace(/\'/g, \''\') .replace(/"/g, \'"\'); if (options.withLinks && isUrl(json)) { html += \'<a href="\' + json + \'" class="json-string" target="_blank">\' + json + \'</a>\'; } else { if (json.indexOf(\'RED_SELF\') > -1) { json = json.replace(\'RED_SELF\', \'\'); html += \'<span class="json-literal" style="color:red">\' + json + \'</span>\'; } else if (json.indexOf(\'RED_parent\') > -1) { json = json.replace(\'RED_parent\', \'\'); html += \'<span class="json-literal RED_parent">\' + json + \'</span>\'; } else { json = json.replace(/"/g, \'\\\\"\'); html += \'<span class="json-string">"\' + json + \'"</span>\'; } } } else if (typeof json === \'number\') { html += \'<span class="json-literal">\' + json + \'</span>\'; } else if (typeof json === \'boolean\') { html += \'<span class="json-literal">\' + json + \'</span>\'; } else if (json === null) { html += \'<span class="json-literal">null</span>\'; } else if (json instanceof Array) { if (json.length > 0) { html += \'[<ol class="json-array">\'; for (var i = 0; i < json.length; ++i) { html += \'<li>\'; if (isCollapsable(json[i])) { html += \'<a href class="json-toggle"></a>\'; } html += json2html(json[i], options); if (i < json.length - 1) { html += \',\'; } html += \'</li>\'; } html += \'</ol>]\'; } else { html += \'[]\'; } } else if (typeof json === \'object\') { var keyCount = Object.keys(json).length; if (keyCount > 0) { html += \'{<ul class="json-dict">\'; for (var key in json) { if (Object.prototype.hasOwnProperty.call(json, key)) { html += \'<li>\'; var keyRepr = options.withQuotes ? \'<span class="json-string">"\' + key + \'"</span>\' : key; if (isCollapsable(json[key])) { html += \'<a href class="json-toggle">\' + keyRepr + \'</a>\'; } else { html += keyRepr; } html += \': \' + json2html(json[key], options); if (--keyCount > 0) { html += \',\'; } html += \'</li>\'; } } html += \'</ul>}\'; } else { html += \'{}\'; } } return html; } $.fn.jsonViewer = function (json, options) { options = Object.assign( {}, { collapsed: false, rootCollapsable: true, withQuotes: false, withLinks: true }, options ); return this.each(function () { var html = json2html(json, options); if (options.rootCollapsable && isCollapsable(json)) { html = \'<a href class="json-toggle"></a>\' + html; } $(this).html(html); $(this).addClass(\'json-document\'); $(this).off(\'click\'); $(this).on(\'click\', \'a.json-toggle\', function () { var target = $(this) .toggleClass(\'collapsed\') .siblings(\'ul.json-dict, ol.json-array\'); target.toggle(); if (target.is(\':visible\')) { target.siblings(\'.json-placeholder\').remove(); } else { var count = target.children(\'li\').length; var placeholder = count + (count > 1 ? \' items\' : \' item\'); target.after( \'<a href class="json-placeholder">\' + placeholder + \'</a>\' ); } return false; }); $(this).on(\'click\', \'a.json-placeholder\', function () { $(this).siblings(\'a.json-toggle\').click(); return false; }); if (options.collapsed == true) { $(this).find(\'a.json-toggle\').click(); } }); }; })(jQuery); var obj={ "id": 1001, "type": "donut", "name": "Cake", "description": "https://en.wikipedia.org/wiki/Doughnut", "price": 2.55, "available": { "store": 42, "warehouse": 600 }, "toppings": [ { "id": 5001, "type": "None" }, { "id": 5002, "type": "Glazed" }, { "id": 5005, "type": "Sugar" }, { "id": 5003, "type": "Chocolate" }, { "id": 5004, "type": "Maple" } ], "uuids": [ "826b23ce-2669-4122-981f-3e2e4429159d", "e32111a0-6a87-49ab-b58f-a01bf8d28ba0", "c055a894-698e-41c0-b85f-7510a7351d9d", ], }; $(\'#aaa\').jsonViewer(obj); </script> 二、富文本编辑器 editor.md 的使用 1、下载依赖包并导入 git clone https://github.com/pandao/editor.md.git <script src="./common/editor.md/editormd.min.js"></script> 2、如果编辑后台返回的数据，那么向后台发送请求，获取数据serverData 3、执行下列代码 that.testEditor = editormd("editormd", { width: "100%", height: "720", watch: false, //关闭分栏 toolbar: false, //关闭工具栏 value: serverData||\'\', path: "./common/editor.md/lib/",//依赖存放路径 }); setTimeout(function () { var value = that.testEditor.getValue();//获取编辑数据 }, 500); 4、详细使用教程，百度“editor.md使用教程” 三、form大文件上传示例 <script src="./common/webuploader.js"></script> <button type="button" id="updataButton">升级</button> <style> #updataButton input[type="file"] { display: none; } </style> //页面初始化的时候执行下面代码 var files; var task_id = WebUploader.Base.guid(); var uploader = WebUploader.create({ server: \'./system/devinfo/upload\', pick: \'#updataButton\', auto: false,//需要手动上传 chunked: true,//需要分片 chunkSize: 20 * 1024 * 1024,//每片大小 chunkRetry: 3,//如果某个分片由于网络问题出错，允许自动重传3次 threads: 1,//允许同时最大上传进程数为1 duplicate: true,//需要去重 formData: {//文件上传请求的参数表，每次发送都会发送此对象中的参数 task_id: task_id, }, fileVal:\'rule\'//设置文件上传域的name }); uploader.on(\'fileQueued\', function (file) { files = file; //有交互：列队完成，告知后台，准备接受数据 //返回成功后执行：uploader.upload();开始上传，无前后台交互 //返回失败执行：uploader.removeFile(files); }).on(\'fileDequeued\', function () { //console.log(\'remove queue success.\'); }).on(\'startUpload\', function () { $scope.updata();//无前后台交互，出现弹窗，告知正在上传 }).on(\'uploadProgress\', function (file, percentage) { //上传中，出现进度条 }).on(\'uploadSuccess\', function (file) { //交互一、告知后台，数据发送完毕 //交互二、定时询问后台，是否更新完毕 }).on(\'uploadError\', function () { //上传出错 }); 四、三种下载 1、a下载，普通JS下载后台文件。 下面后台返回的data为json数据，不是某种格式的文件。 function down(data) { var a = document.createElement(\'a\'); document.body.appendChild(a); a.download = \'111.txt\'; a.href = URL.createObjectURL(data); a.click(); a.remove(); }; function down(url) { var a = document.createElement(\'a\'); document.body.appendChild(a); a.download = \'111.txt\'; a.href = url; a.click(); a.remove(); }; 2、Excel下载 (1)引入插件xlsx.core.min.js和alasql.min.js (2)代码如下： var tableTh=["times [时间]", "user [用户]", "ip [IP地址]", "result [登录结果]"]; var title="文件名" var dataArray=[ { times: "2003-03-04",//0 user: "wdsfm",//1 ip: "216.94.168.85"//2 result: 1,//3 ServiceType: "yhzuu", id: 1, operation: "刷新页面", },{ times: "2003-03-04",//0 user: "wdsfm",//1 ip: "216.94.168.85"//2 result: 1,//3 ServiceType: "yhzuu", id: 2, operation: "刷新页面", } ]; alasql(\'SELECT\'+ tableTh+ \'INTO XLSX("\'+ title+ \'.xlsx",{headers:true}) FROM ?\', dataArray); 3、PDF下载 (1)如果想通过纯前端技术实现文件下载，直接把a标签的href属性设置为文件路径即可，<a href = "https://cdn.shopify.com/s/Manaul.pdf" download = "test.pdf"> 下载</a>。txt、jpg、pdf等格式的文件，浏览器支持直接打开， (2)PDF版报告的展示 <script src="/audit-html/static/common/jquery-media.js"></script> 步骤一：告诉后台我要下载文件，后台同意 步骤二：执行下面代码 $(\'#handout_wrap_inner\').media({ width: \'100%\', height: \'680px\', autoplay: true, src: url//后台存放pdf文件的地方 }); 五、JSONP 1、Ajax，在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。 2、Ajax请求存在因同源策略而导致的跨域无权限访问的问题。 3、凡是拥有”src”这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>）。 4、JSONP的一般使用过程是，定义myCallback函数，添加一个<script>标签，通过问号传参的形式?callback=myCallback传给服务器；服务器收到参数后，以字符串的形式"myCallback({key:{key:value}})"返回JSON数据，浏览器把字符串里的内容当作script代码来执行，类似于eval函数。 <script type="text/javascript"> function fn(data) { console.log(data); console.log($); } </script> <script type="text/javascript" src="http://matchweb.sports.qq.com/kbs/hotMatchList?callback=myCallback"></script> 5、在jquery中，jsonp的实现方式是：在动态添加的<script>标签里执行(经过ajax请求后)服务器返回的js脚本(valueCallback函数的执行)，js脚本执行完毕后，<script>标签和js脚本被移除。 6、以下是jQuery中ajax的配置与地址栏显示的对应关系，如地址栏默认为：url?callback=jQuery123&other。 $.ajax({ data:{},//规定要发送到服务器的数据。 dataType:"jsonp",//预期的服务器响应的数据类型。 jsonp:"keyCallback",//重写回调函数的字符串。用服务器给的keyCallback取代jQuery默认的callback。 jsonpCallback:"valueCallback",//规定回调函数的名称。用服务器给的valueCallback取代jQuery默认的jQuery123，本地需要定义valueCallback函数来利用服务器返回的"valueCallback(data)" }); 六、cookie 1、cookie的作用 （1）http是一种无状态的协议，服务器不能通过它区分向它发出请求的不同客户； （2）cookie可以在前后端进行用户的身份认证，标记用户。 （3）服务端的解决办法是(简)：服务端返给客户端响应头Set-Cookie，客户端接收到这个响应后，此后发送的每一个请求，浏览器都会自动带上Cookie请求头， （4）服务端的解决办法是(繁)：向客户端种植cookie，并在服务端通过session去管理cookie。当需要记住用户时，比如说登录，在服务端会设置一个响应头Set-Cookie，返回给客户端，例如：Set-Cookie:SESSIONID=12345678；客户端接收到这个响应后，此后发送的每一个请求浏览器都会自动带上Cookie请求头，对应内容是Cookie:SESSIONID=12345678。在服务端内存中存有session，将客户端发送的请求中的cookie值与内存中的session进行对比，就可以识别这个客户端了。 （5）种cookie的用途，A便于后端判断前端是否已经登陆，B便于后端判断前端登陆是否超时。如果未登录，那么返给前端相应的状态码，前端跳转到登陆页；如果登录已超时，那么重置cookie并返给前端相应的状态码，前端跳转到登陆页。 2、Cookie的使用 （1）创建cookie：document.cookie = "username=John Doe; expires=Sun, 31 Dec 2017 12:00:00 UTC"; （2）读取cookie：var x = document.cookie; （3）删除cookie：document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; 七、柯里化函数：接受父级函数的第一个参数，用返回值函数接受余下的参数，再返回最终结果的函数。 js 如何实现sum(2,3)===sum(2)(3) function sum() { var arguments0 = arguments[0]; if (arguments.length === 1) { return function (arguments1) { return arguments0 + arguments1; } } if (arguments.length === 2) { return arguments[0] + arguments[1] } } console.log(sum(2,3)==sum（2）（3）); 附1、form小文件上传示例 1、原生事件中，这里默认传入实参this，指的是input上传的内容. 2、在angular1事件中，这里为空，所以需要用原生事件，调用angular1方法. 3、原生事件中调用angular方法, 比如input的onChange事件想调用angular里面定义的方法onChange <form enctype="multipart/form-data" method="post" id="formID"> <div class="form-inline protocol-private-row"> <div class="form-group"> <label> <span>*</span> <span>协议名称</span> </label> <input type="text" class="form-control" name="name" ng-model="thisForm.name" id="protocolID" style="padding-left: 50px;width:400px;" maxlength="40"> <span class="pre-protocol-string">UDF-</span> </div> </div> <div class="form-inline protocol-private-row"> <div class="form-group"> <label> <span>*</span> <span>协议脚本</span> </label> <button type="button" > 选择文件 //注意：鼠标对象和元素对象 <input type="file" name="rule" onchange="angular.element(this).scope().fileChangedOne(this)"> </button> <span>{{uploadOne[0].name||\'请选择 .lua格式文件\'}}</span> </div> </div> <div class="form-inline protocol-private-row"> <div class="form-group "> <label> <span>*</span> <span>协议描述</span> </label> <button type="button" > 选择文件 <input type="file调用webpack打包后的js中的函数报错问题