<!DOCTYPE html>
<html lang="en" ng-app="appModule" ng-controller="ancestorCtrl">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body >
<p> 不限层级表单的实现逻辑</p>
<p> 1、需求描述：</p>
<p>（1）一个表单，包含select1（option1）和input1； </p>
<p>（2）当点击option1时，向后台发送请求，返回值包含select2（option2）和input2，前端把返回值放到select1下面；</p>
<p>（3）当点击option2时，向后台发送请求，返回值包含select3（option3）和input3，前端把返回值放到select2下面......</p>
<p>2、实现逻辑，存放option返回值的div及其内的select通过各自id的index来区分 </p>
<p>方法一：jQuery实现。 </p>
<p>（1）在div1内，上面放select1，下面放另一个div2，作为option1返回值的存放仓库； </p>
<p>（2）当点击option2时，在div2内，上面放select2，下面放另一个div3，作为option2返回值的存放仓库...... </p>
<p>方法二、angular1实现。 </p>
<p>（1）自定义标签1，在自定义标签1内部，根据自定义标签1的相关变量，决定是否再调用自定义标签1，如此循环。 </p>
<p>（2）相关伪代码如下： </p>
<my-parent attrs=‘allObject[index]‘></my-parent>
</body>
</html>
<script>
/* app.directive(‘myParent‘,function () {
var index=1;
var url= ‘‘;
url+= ‘<select ng-change="sendClick() id={{index}}>‘;
url+= ‘<option">第一段</option>‘;
url+= ‘<option">第二段</option>‘;
url+= ‘<option">第三段</option>‘;
url+= ‘</select>‘;
url+= ‘<div ng-if="isBoolean‘+index+‘">‘;
url+= ‘<my-parent attrs="allObject‘+index+‘"></my-parent>‘;
url+= ‘</div>‘ ;
url+= ‘</div>‘;
return {
template:url,
restrict: ‘E‘,
controller:function ($scope) {
$scope[isBoolean+index]=false;
$scope.sendClick = function () {
$scope[isBoolean+index]=true;
index+=1;
//此处向后台发送请求，给$scope[allObject+index]赋值
};
},
}
}); */
</script>
原文地址：https://www.cnblogs.com/gushixianqiancheng/p/11051777.html
时间： 2024-08-02 13:05:20