tree架构迭代-angularjs

最新推荐文章于 2024-05-18 09:35:07 发布

过去式的美好

最新推荐文章于 2024-05-18 09:35:07 发布

阅读量595

点赞数

分类专栏：移动前端框架移动App开发需要用到的get 另类实用

本文链接：https://blog.csdn.net/u012138137/article/details/80324778

版权

移动前端框架同时被 3 个专栏收录

41 篇文章 0 订阅

订阅专栏

另类实用

40 篇文章 1 订阅

订阅专栏

移动App开发需要用到的get

5 篇文章 0 订阅

订阅专栏

在html中出现很多如组织架构，岗位架构，或者多层菜单式的具有上下级关系的树形菜单。
在用angularjs中碰到一个问题，用1.4.3版本会出现堆栈溢出问题，而1.6.2~1.7.0不会有问题。有其他更好的的迭代方式还不知道怎么使用。
以下代码是在基于angularjs1.7.0实现的，获取到的数据格式是数组。

在控制器中实现，也可以放到指令中。

 /**
         * json转tree格式
         * @param a
         * @param idStr
         * @param pidStr
         * @param chindrenStr
         * @returns {Array}
         */
        $scope.transData = function(a, idStr, pidStr, chindrenStr) {
            var r = [], hash = {}, id = idStr, pid = pidStr, children = chindrenStr, i = 0, j = 0, len = a.length;
            for (; i < len; i++) {
                hash[a[i][id]] = a[i];
            }
            for (; j < len; j++) {
                var aVal = a[j], hashVP = hash[aVal[pid]];
                if (hashVP) {
                    !hashVP[children] && (hashVP[children] = []);
                    hashVP[children].push(aVal);
                } else {
                    r.push(aVal);
                }
            }
            return r;
        };
        /*
        *通过接口获取到的treeObj对象内容转成具有层级结构的树。
        */
    $scope.jsonDataTree = $scope.transData(treeObj, 'id', 'parentId', 'children');

在页面中的指令内容

<body>
    <div class="container" ng-controller="report.custom.ctrl">
        <tree-view ng-model="jsonDataTree"></tree-view>
    </div>
</body>

指令代码，toggle()方法是触发每个菜单的事件。没实现

m.directive('treeView', ["$window", 'T.window',
    function($window, window$){
        return {
            restrict : 'EA',
            require : '?ngModel',
            scope: {
                "ngModel": "="
            },
            template : `

            <div ng-repeat="sub in ngModel">
                <a ng-click="toggle()">
                    <span>{{sub.orgName}}</span>
                    <div style="margin-left:2em" ng-if="sub.children && sub.children.length">
                            <tree-view ng-model="sub.children"></tree-view>
                    </div>
                </a>
             </div>

            `,
            replace:true,
            link : function ($scope, element, attrs, ngModel) {
                console.error($scope)
            }
        };
    }
]);