相思资源网 Design By www.200059.com
本文实例讲解了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
<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>
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>
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+'</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);
}
}
}
}]);
以上就是Angular实现form自动布局的详细代码，希望对大家的学习有所帮助。
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无Angular实现form自动布局的评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。