angular1jquery实现无限表单效果
Posted gushixianqiancheng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angular1jquery实现无限表单效果相关的知识，希望对你有一定的参考价值。
1、需求描述：（1）点击页面一个按钮，向后台发送请求，获取内容；（2）内容有input和select，select有默认项和备选项，其中备选项不显示，点击默认项右侧三角号后，备选项展示；（3）每个备选项右侧还有三角号，点击后向后台发送请求，获取内容；（4）重复（2）（3）步骤。
2、逻辑实现：（1）把请求结果渲染到页面后，立即找到并隐藏select的备选项；（2）给每一个备选项的三角号绑定点击函数（递归，get_options），以便向后台请求；（3）给每一个备选项的文字内容绑定点击函数，以便给默认项赋值；（4）给每一个默认项的文字绑定点击函数，以便隐藏或展示备选项。
3、代码结构。通过class、id、event对象、自定义属性，将传递并关联相关数据。
```html
<div>
<!-- 下面的div通过遍历拼接起来 -->
<div><!-- select的最外层div -->
<div>下拉框的label内容</div>
<div>
<div><span>默认项文字</span><span>三角号</span></div>
<ul><li><span>备选项文字</span><span>三角号</span></li></ul>
</div>
<div>
<div><span>默认项文字</span><span>三角号</span></div>
<ul><!-- 下面的li通过遍历拼接起来 -->
<li><span>备选项文字</span><span>三角号</span></li>
<div>备选项详情</div></ul>
</div>
</div>
</div>
```
欢迎预览（点击右侧“运行”，就可以运行）
```html:run
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.add_cust_rule_mask
width: 100%;
height: 100%;
background: #000;
position: fixed;
left: 0;
top: 0;
opacity: 0.5;
z-index: 7;
.add_cust_rule_alert
display: flex;
justify-content: center;
/* align-items:center; */
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #fff;
border-radius: 0;
overflow: auto;
z-index: 11;
width: 1000px;
height: 800px;
padding: 30px;
ul li
list-style: none;
.add_cust_rule_alert .before_click
margin-left: 20px;
display: inline-block;
width: 15px;
height: 15px;
background: red;
/*background: url(../../static/img/guolv-12_6-down.png) no-repeat;*/
background-size: contain;
background-position: center center;
cursor: pointer;
.add_cust_rule_alert .after_click
margin-left: 20px;
display: inline-block;
width: 15px;
height: 15px;
background: green;
/* background: url(../../static/img/guolv-12_6-up.png) no-repeat;*/
background-size: contain;
background-position: center center;
cursor: pointer;
</style>
</head>
<body>
<div ng-controller="ctrl">
<div ng-click="add_cust_rule()"
style="width: 200px;height:100px;line-height:100px;margin:0 auto;font-size: 80px;text-align: center">点击
</div>
<p style="font-size: 30px;">说明：点击“点击”后，红色方块，表示已经折叠，点击它，可以展开；绿色方块，表示已经展开，点击它，可以折叠。</p>
<div class="add_cust_rule_mask" ng-show=‘is_show_alert‘ id="add_cust_rule_mask" ng-click="close_mask()">
</div>
<div class="add_cust_rule_alert" ng-show=‘is_show_alert‘>
<div>
<div id="add_cust_rule_content">
</div>
<div style="display: flex;justify-content: center;margin:40px auto;">
<input type="button" value="添加自定义规则 已完成，关闭弹窗" ng-click="close_mask()"/>
</div>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>
<script>
var app = angular.module(‘app‘, []);
app.controller(‘ctrl‘, function ($scope)
/* 以下"添加自定义规则"*/
//本功能的实现逻辑为递归：（1）触发事件，获取后台返回的数据，执行$scope.insert_form函数，在该函数内部，a将数据插入到页面上，b给每一个备选项右侧的三角号绑定点击函数；（2）在点击函数内部，获取后台返回的数据，执行$scope.insert_form函数；实现递归。
//本功能的实现逻辑为递归：（1）执行插入函数，绑定点击函数；（2）执行点击函数，执行插入函数。
$scope.is_show_alert = false;
var self_outer_next = 0;//避免递归时出现ID重复
var self_inner_next = 0;//避免递归时出现ID重复
$scope.cust_data =
‘protoContext‘:
‘FUNC‘: // 界面label1
‘default_select‘: ‘Write_Single_Coil‘,
‘type‘: ‘select‘, // 表明FUNC后为select
‘value‘: [
‘Write_Single_Coil‘: // select 中的 option
‘isFinal‘: 0, // 是否是最后一级的value？能否继续点击？ 0：能点击， 1：不能点击
‘default_select‘: 0//select默认选项；
,
‘Write_Single_Register‘:
‘isFinal‘: 1,
,
‘Write_Single_RegisterUP‘:
‘isFinal‘: 1,
,
],
,
‘FUCKFUCK‘: // 界面label1
‘default_select‘: ‘Write_Single_FUCK‘,
‘type‘: ‘select‘, // 表明FUNC后为select
‘value‘: [
‘Write_Single_FUCK‘: // select 中的 option
‘isFinal‘: 1, // 是否是最后一级的value？能否继续点击？ 0：能点击， 1：不能点击
‘default_select‘: 0//select默认选项；
,
‘Write_Single_RegisterFUCK‘:
‘isFinal‘: 0,
,
‘Write_Single_RegisterFUCKYOU‘:
‘isFinal‘: 0,
,
],
,
‘ADDR‘: // 界面 label2
‘type‘: ‘input‘, // ADDR后为 input
‘range‘: ‘[0, 65535]‘, // input的输入范围限制
,
‘BDDR‘: // 界面 label2
‘type‘: ‘input‘, // ADDR后为 input
‘range‘: ‘[0, 65535]‘, // input的输入范围限制
;
$scope.close_mask = function ()
$scope.is_show_alert = false;
;
$scope.option_click = function () //点击下拉框“备选项”文字内容时，触发的函数。作用：用该项的文字更改下拉框“默认框”里面的文字
$(‘.single_click‘).each(function (index, item)
$(item).off(‘click‘);
var cust_option = $(this).attr(‘cust_option‘);
$(item).on(‘click‘, function (event)
$(‘#‘ + cust_option).html(event.target.innerHTML);
);
);
;
$scope.label_width = function () //label标签右侧对齐
setTimeout(function ()
var label_width = 0;
$(‘.label_width‘).each(function (index, item)
if (label_width < item.clientWidth)
label_width = item.clientWidth;
);
$(‘.label_width‘).each(function (index, item)
//item.style.width = label_width + ‘px‘;
$(item).width(label_width);
);
);
;
$scope.options_show = function () //点击下拉框“默认框”右侧的三角号时，触发的函数。作用：让下拉框备选项显示或隐藏
$(‘.options_show‘).each(function (index, item)
$(item).off(‘click‘);
var cust_three = $(this).attr(‘cust_three‘);
$(item).on(‘click‘, function ()
if ($(‘#ul_div‘ + cust_three).is(‘:hidden‘))
$(‘#ul_div‘ + cust_three).show();
$(‘.‘ + cust_three).hide();
$(‘#three‘ + cust_three).removeClass(‘before_click‘).addClass(‘after_click‘);
$(‘.three‘ + cust_three).removeClass(‘after_click‘).addClass(‘before_click‘);
else
$(‘#ul_div‘ + cust_three).hide();
$(‘#three‘ + cust_three).removeClass(‘after_click‘).addClass(‘before_click‘);
);
);
;
$scope.button_submit = function ()
$(‘.button_submit‘).each(function (index, item)
$(item).off(‘click‘);
var self = $(this).attr(‘self‘);
$(item).on(‘click‘, function ()
console.log(self);
);
);
;
$scope.three_click = function () //给所有下拉框“备选项”右侧的三角号绑定点击函数。作用：点击后，向后台请求数据，该数据作为该备选项的详情插入到该备选项的下面，然后再次给所有下拉框“备选项”右侧的三角号绑定点击函数。
$(‘.three_click‘).each(function (index, item)
$(item).off(‘click‘);
var cust_attr = $(this).attr(‘self‘);
$(item).on(‘click‘, function ()
if ($(item).hasClass(‘after_click‘))
$(item).removeClass(‘after_click‘).addClass(‘before_click‘);
$(‘#id‘ + cust_attr).empty();
return;
$(item).removeClass(‘before_click‘).addClass(‘after_click‘);
//此处向后台发送请求
var default_array = [];//保存本次请求返回值中所有下拉框的默认选项
$.each($scope.cust_data.protoContext, function (key_outer, value)
if (value.type === ‘select‘)
$.each(value.value, function (index, value)
$.each(value, function (key, value)
if (value.default_select === 0)
default_array.push(key);
);
);
);
$scope.insert_form($scope.cust_data.protoContext, default_array, cust_attr);
);
);
;
$scope.insert_form = function (true_data, default_array, cust_attr) //公用函数。作用：把从后台返回的数据插入到该备选项的下面并绑定相关函数。
cust_attr = cust_attr || ‘‘;
default_array = default_array || [];
var str = ‘‘;
var self_outer_id = ‘self_outer_id‘;
var self_outer_index = 0;
$.each(true_data, function (key_outer, value)
if (value.type === ‘select‘)
str += ‘<div style="display:flex;margin:0 auto;">‘;
str += ‘<div style="margin-left:10px;height:40px;line-height:40px;margin-top:10px;text-align:right;display:inline-block;" class="label_width">‘ + key_outer + ‘</div>‘;
str += ‘<div>‘;
str += ‘<div style="user-select: none;border-radius:5px;border:1px solid #ccc;height:40px;line-height:40px;margin-left:10px;margin-top:10px;padding-left:10px">‘;
str += ‘<span id="‘ + self_outer_id + self_outer_next + ‘">‘ + default_array[self_outer_index] + ‘</span>‘;
str += ‘<span class="before_click options_show" cust_three="‘ + self_outer_id + self_outer_next + ‘" id="three‘ + self_outer_id + self_outer_next + ‘" style="margin-right:10px;"></span>‘;
str += ‘</div>‘;
str += ‘<ul style="border-radius:5px;border:1px solid #ccc;margin-left:10px;padding:10px;" class="ul_options" id="ul_div‘ + self_outer_id + self_outer_next + ‘">‘;
var self_inner_id = ‘self_inner_id‘;
$.each(value.value, function (index, value)
$.each(value, function (key_inner, value)
str += ‘<li style="height:45px;line-height:45px;">‘;
str += ‘<span style="user-select: none;cursor:pointer" class="single_click" cust_option="‘ + self_outer_id + self_outer_next + ‘">‘ + key_inner + ‘</span>‘;
if (value.isFinal === 0)
str += ‘<span self="‘ + self_inner_id + self_inner_next + ‘" class="three_click before_click three‘ + self_outer_id + self_outer_next + ‘"></span>‘;
str += ‘</li>‘;
str += ‘<div style="margin-left:20px;" id="id‘ + self_inner_id + self_inner_next + ‘" class="‘ + self_outer_id + self_outer_next + ‘"> </div>‘;
else
str += ‘</li>‘;
);
self_inner_next += 1;
);
str += ‘</ul>‘;
str += ‘</div>‘;
str += ‘</div>‘;
self_outer_next += 1;
self_outer_index += 1;
if (value.type === ‘input‘)
str += ‘<div style="display:flex;margin:10px;">‘;
str += ‘<span style="height:40px;line-height:40px;text-align:right;display:inline-block;" class="label_width">‘ + key_outer + ‘</span>‘;
str += ‘<input style="border-radius:5px;border:1px solid #ccc;height:40px;line-height:40px;margin-left:10px;padding-left:10px;" type="text" placeholder="‘ + value.range + ‘">‘;
str += ‘<input style="text-align:center;cursor:pointer;width:50px;border-radius:5px;border:1px solid #ccc;height:40px;line-height:40px;margin-left:10px;" type="button" class="button_submit" self="‘ + value.range + ‘" value="提交"/>‘;
str += ‘</div>‘;
);
var cust_id = cust_attr == ‘‘ ? ‘#add_cust_rule_content‘ : ‘#id‘ + cust_attr;
$(cust_id).empty().append(str).show().find(‘.ul_options‘).hide();
$scope.three_click();
$scope.option_click();
$scope.button_submit();
$scope.options_show();
$scope.label_width();
;
$scope.add_cust_rule = function ()
//此处向后台发送请求并获取数据；
$scope.is_show_alert = true;
var default_array = [];//保存本次请求返回值中所有下拉框的默认选项
$.each($scope.cust_data.protoContext, function (key_outer, value)
if (value.type === ‘select‘)
$.each(value.value, function (index, value)
$.each(value, function (key, value)
if (value.default_select === 0)
default_array.push(key);
);
);
);
$scope.insert_form($scope.cust_data.protoContext, default_array);
;
/* 以上"添加自定义规则"*/
);
</script>
</body>
</html>
```
以上是关于angular1jquery实现无限表单效果的主要内容，如果未能解决你的问题，请参考以下文章