118不限层级表单的实现逻辑
Posted gushixianqiancheng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了118不限层级表单的实现逻辑相关的知识，希望对你有一定的参考价值。
<!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>
以上是关于118不限层级表单的实现逻辑的主要内容，如果未能解决你的问题，请参考以下文章
WebAPI增加Area以支持无限层级同名Controller