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不限层级表单的实现逻辑

猜你喜欢
