Angular实现form自动布局

Angular实现form自动布局

本文实例讲解了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)

}

}]);

2. formlayout.html

{{title}}

提交

重置

3. formlayout.html

{{title}}

提交

重置

4. formlayoutdirective.js

'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 : '\

\

\

password : '

\

\

radio : '\

\

email : '\

\

\

tel : '\

\

\

url : '\

\

\

number : '\

\

\

checkbox : '

\

range : '

\

\

time : '

\

\

date : '

\

\

datetime : '

\

\

search : '

\

\

select : '

\

\

textarea : '

\

\

};

//默认的模板, 可以使用如下的方式使用默认的模板

this.defaultTemplate = '';

this.radioTmpl = 'radiotitle';

this.checkboxTmpl = 'checkboxtitle';

}

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.ahttp://ttr.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 = 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);

}

}

}

}]);

以上就是Angular实现form自动布局的详细代码，希望对大家的学习有所帮助。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。