首页 / 脚本样式 / JavaScript / Angular实现form自动布局

具体代码：
1.formlayoutCtrl.js

"use strict";sxlcApp.controller（"formlayoutCtrl", ["$scope", "$filter", "$http", function（$scope, $filter, $http）{ $scope.title = "表单布局中"; $scope.dataParamsUrl = "./php/formlayout.json";$scope.resetForm = function（num）{console.log（num） }}]）;

<div class="container" ng-controller="formlayoutCtrl"> <span>{{title}}</span> <form class="form-horizontal" style="width: 400px;" name="formlayout" w5c-form-validate="validateOptions" novalidate><form-layout url="dataParamsUrl"></form-layout><button type="submit" class="btn btn-sm btn-info"> 提交</button><button type="reset" class="btn btn-sm btn-danger" ng-click="resetForm（）"> 重置</button> </form></div>

<div class="container" ng-controller="formlayoutCtrl"> <span>{{title}}</span> <form class="form-horizontal" style="width: 400px;" name="formlayout" w5c-form-validate="validateOptions" novalidate><form-layout url="dataParamsUrl"></form-layout><button type="submit" class="btn btn-sm btn-info"> 提交</button><button type="reset" class="btn btn-sm btn-danger" ng-click="resetForm（）"> 重置</button> </form></div>

"use strict";angular.module（"form.layout", []）/** * 定义布局的服务 * @method * @param {Object} ） this.defaultTemplate [布局的模板] * @return {[type]}[description] */.provider（"formLayout", function（）{ // 定义布局构造函数function FormLayoutFn（）{/** * 定义表单元素的模板 * @type {{text: string, radio: string, checkbox: string, remember: string, range: string, time: string, date: string, datetime: string, search: string, select: string}} */this.elementTemplate = {text : "<div class="form-group"> <label></label> <input type="text" class="form-control" /></div>",password : "<div class="form-group"><label></label><input type="password" class="form-control" /> </div>",radio : "<div class="form-group"><label></label><div id="radiolist"></div> </div>",email : "<div class="form-group"> <label></label> <input type="email" class="form-control" /></div>",tel : "<div class="form-group"> <label></label> <input type="tel" class="form-control" /></div>",url : "<div class="form-group"> <label></label> <input type="url" class="form-control" /></div>",number : "<div class="form-group"> <label></label> <input type="number" class="form-control" /></div>",checkbox : "<div class="form-group"><label></label><div id="checkboxlist"></div></div>",range : "<div class="form-group"><label></label><input type="range"/> </div>",time : "<div class="form-group"><label></label><input type="time" class="form-control"/> </div>",date : "<div class="form-group"><label></label><input type="date" class="form-control"/> </div>",datetime : "<div class="form-group"><label></label><input type="datetime" class="form-control"/> </div>",search : "<div class="form-group"><label></label><input type="search" class="form-control"/> </div>",select : "<div class="form-group"><label></label><select class="form-control"></select> </div>",textarea : "<div class="form-group"><label></label><textarea class="form-control"></textarea> <div>", };//默认的模板, 可以使用如下的方式使用默认的模板this.defaultTemplate = "<input>";this.radioTmpl = "<label class="radio-inline"><input type="radio">radiotitle</label>";this.checkboxTmpl = "<label class="checkbox-inline"><input type="checkbox">checkboxtitle</label>"; }FormLayoutFn.prototype = {/** * 获取模板 * @method getElementTemplate * @return {[type]} [description] */getElementTemplate : function （） { return this.elementTemplate;}, /** * 配置布局元素的模板 * @param configTemplate */setElementTemplate : function（configTemplate）{ this.elementTemplate = angular.extend（this.elementTemplate, configTemplate）;}, /** * 实现布局函数 * @method layout * @param {[type]} eleObj指令中的模板对象 * @param {[type]} elementObj 表单布局元素对象 * @return {[type]} [description] */layout : function（eleObj, elementObj）{ var thiz = this; var elementTemplate = this.elementTemplate; var defaultTemplate = this.defaultTemplate; var radioTmpl = this.radioTmpl; var checkboxTmpl = this.checkboxTmpl;if （angular.isObject（eleObj） && angular.isObject（elementObj）） {angular.forEach（elementObj, function（elementObjIterm, elementObjKey）{ //console.log（elementObjIterm.attr.type）; var type = $.trim（elementObjIterm.attr.type）; var templateObj = angular.element（elementTemplate[type]）; // console.log（templateObj.find（"input"））; switch（type）{case "textarea" : var fileld = templateObj.find（"textarea"）; // var templateObj = angular.element（elementTemplate.textarea）; break;case "select" : var fileld = templateObj.find（"select"）; // var templateObj = angular.element（elementTemplate.select）; break;case "button" : var fileld = templateObj.find（"button"）; // var templateObj = angular.element（elementTemplate.button）; break;case "datepicker" : var fileld = templateObj.find（"datepicker"）; // var templateObj = angular.element（elementTemplate.datepicker）; break;case "radio" : var fileld = templateObj.find（"#radiolist"）; // var templateObj = angular.element（elementTemplate.datepicker）; break;case "checkbox" : var fileld = templateObj.find（"#checkboxlist"）; // var templateObj = angular.element（elementTemplate.datepicker）; break;default : var fileld = templateObj.find（"input"） ; break; } // 设置 label 的标签名字 templateObj.find（"label"）.html（elementObjIterm.labeltext）;if （"select" == type） {var options = elementObjIterm.attr.option;angular.forEach（options, function（content, val）{ var option = angular.element（"<option value=""+val+"">"+content+"</option>"）; fileld.append（option）;}）; }else if（"radio" == type）{var options = elementObjIterm.attr.option;angular.forEach（options, function（content, val）{ var tmpl = radioTmpl.replace（"radiotitle", content）; var tmplObj = angular.element（tmpl）; tmplObj.find（"input"）.attr（"value", val）; fileld.append（tmplObj）;}）;// console.log（templateObj.find（"label"））; }else if（"checkbox" == type）{var options = elementObjIterm.attr.option;angular.forEach（options, function（content, val）{ var tmpl = checkboxTmpl.replace（"checkboxtitle", content）; var tmplObj = angular.element（tmpl）; tmplObj.find（"input"）.attr（"value", val）; fileld.append（tmplObj）;}）; }else{angular.forEach（elementObjIterm.attr, function（val, attrname）{ fileld.attr（attrname, val）;}） } eleObj.append（templateObj.append（fileld））;}）; return eleObj; }else{throw "传入的参数不是对象"; }}}; // 实例布局化构造类 var formLayout = new FormLayoutFn（）;this.$get = function （） {return formLayout; }; //配置布局元素的模板 this.setElementTemplate = function （configTemplate） {if （！configTemplate） return ;formLayout.setElementTemplate（configTemplate）; }}）;/** * 指令的实现 * @method * @return {[type]}[description] */angular.module（"form.layout"） .directive（"formLayout", ["$http", "$filter", "formLayout",function（$http, $filter, formLayout）{return { restrict : "AE", scope: {url : "=",// fields : {} }, replace : true, // templateUrl : "./tmpl/formlayout.html", transclude : true, // require : "?^formLayout", link : function（scope, elem, attrs）{if（！scope.url）{ throw "请在指令参数url中传入获取数据的 url 的值";}$http.get（scope.url）.success（function（successData, status, headers, config）{ if （！successData.code） {scope.fields = successData.data;processFormFilds（successData.data）; }else{throw "获取表单数据失败"; }}） function processFormFilds（data）{ formLayout.layout（elem, data）; // console.log（data）;} }} }]）;