Angular implements automatic form layout _ AngularJS

This article describes how Angular implements automatic form layout in the form of code snippets, if you are interested, you can refer to the example in this article to explain the detailed code for Angular to implement form automatic layout and share it with you for your reference. The specific content is as follows:

:

Code:

1. formlayoutCtrl. js

'Use strict '; sxlcApp. controller ('formlayoutctrl ', [' $ scope ',' $ filter', '$ http', function ($ scope, $ filter, $ http) {$ scope. title = 'form layout '; $ scope. dataParamsUrl = '. /php/formlayout. json '; $ scope. resetForm = function (num) {console. log (num)}]);

2. formlayout.html

 {{title}} 

3. formlayout.html

 {{title}} 

4. formlayoutdirective. js

'Use strict '; angular. module ('form. layout ', [])/*** defines the layout Service * @ method * @ param {Object}) this. defaultTemplate [layout TEMPLATE] * @ return {[type]} [description] */. provider ('formlayout ', function () {// defines the layout constructor function FormLayoutFn () {/*** defines the template of the form Element * @ type {text: string, radio: string, checkbox: string, remember: string, range: string, time: string, date: string, datetime: string, search: string, select: string} */this. elementTemplate = {text :'\
\\\
', Password :'
\\\
', Radio :'\
\\
\
', Email :'\
\\\
', Tel :'\
\\\
', Url :'\
\\\
', Number :'\
\\\
', Checkbox :'
\\
\
', Range :'
\\\
', Time :'
\\\
', Date :'
\\\
', Datetime :'
\\\
', Search :'
\\\
', Select :'
\\\
', Textarea :'
\\\
',}; // Default template. You can use the default template this. defaultTemplate =' in the following way''; This. radioTmpl ='Radiotitle'; This. checkboxTmpl ='Checkboxtitle';} FormLayoutFn. prototype = {/*** get template * @ method getElementTemplate * @ return {[type]} [description] */getElementTemplate: function () {return this. elementTemplate;},/*** template for configuring layout elements * @ param configTemplate */setElementTemplate: function (configTemplate) {this. elementTemplate = angular. extend (this. elementTemplate, configTemplate );}, /***** implement layout function * @ method layout * @ param {[type]} template object in the eleObj command * @ param {[type]} elementObj form layout element object * @ 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 'dateicker': var fileld = templateObj. find ('dateicker'); // 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;} // set the label name templateobj.find('label'demo.html (elementObjIterm. labeltext); if ('select' = type) {var options = elementObjIterm. attr. option; angular. forEach (options, function (content, val) {var option = angular. element (''+ Content +''); 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 = elem EntObjIterm. 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 ele Obj;} else {throw' the input parameter is not the object '; }}; // The var formLayout = new FormLayoutFn (); this. $ get = function () {return formLayout;}; // configure the layout element template this. setElementTemplate = function (configTemplate) {if (! ConfigTemplate) return; formLayout. setElementTemplate (configTemplate) ;}});/*** command implementation * @ 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' enter the url value of the obtained data in the url of the instruction parameter ';} $ http. get (scope. url ). success (function (successData, status, headers, config) {if (! SuccessData. code) {scope. fields = successData. data; processFormFilds (successData. data);} else {throw' failed to get form data ';}) function processFormFilds (data) {formLayout. layout (elem, data); // console. log (data) ;}}}]);

The above is the detailed code for Angular to implement automatic form layout. I hope it will be helpful for your learning.