本文主要包含Angular实现form自动布局等相关知识,anziguoer 希望在学习及工作中可以帮助到您
本文实例讲解了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>
2. formlayout.html
<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>
3. formlayout.html
<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>
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 : '\<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+'</