脚本宝典收集整理的这篇文章主要介绍了

angular三级联动组件编写,树形组件

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

<!DOCTYPE html>
<html ng-app="com.ngbook.demo">
<head>
    <meta name="description" content="ng trrview example">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
<style type="text/css">
ul {
    list-style: none;
}

.text-field {
    cursor: pointer;
}

.check-box {
    width: 24px;
    height: 18px;
    border-radius: 8px;
}
</style>
<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script type="text/javascript">
angular.module("com.ngbook.demo", [])
    .controller("DemoController", ['$http', '$scope', function($http, $scope) {
        var dataset = [{
            "code": "00",
            "name": "总部",
            "level": "0",
            "parentcode": "",
            "parentname": ""
        }, {
            "code": "01",
            "name": "东北",
            "level": "1",
            "parentcode": "00",
            "parentname": "总部"
        }, {
            "code": "02",
            "name": "辽宁",
            "level": "2",
            "parentcode": "01",
            "parentname": "东北"
        }, {
            "code": "03",
            "name": "东南",
            "level": "1",
            "parentcode": "00",
            "parentname": "总部"
        }, {
            "code": "4",
            "name": "123",
            "level": "1",
            "parentcode": "00",
            "parentname": "总部"
        }]
        $scope.treedata = [];

    

//遍历取出数据,解析多个层级数据,一维数据解析成树形,如本来就为树形结构,忽略此步骤

        /*同getTree函数同种功能,临时变量写法*/
        function listTree(data, pid) {
            var result = [],
                temp;
            for (var i = 0; i < data.length; i++) {
                if (data[i].parentcode == pid) {
                    var obj = {
                        "name": data[i].name,
                        "code": data[i].code
                    }
                    temp = listTree(data, data[i].code)
                    if (temp.length > 0) {
                        obj.children = temp
                    }
                    result.push(obj)
                }
            }
            return result
        }

        function getTree(nodes) {
            var gc = function(parentid) {
                var cn = [];
                for (var i = 0; i < nodes.length; i++) {
                    var n = nodes[i];
                    if (n.parentcode == parentid) {
                        n.children = gc(n.code);
                        cn.push(n);
                    };
                };
                return cn;
            };
            return gc("");
        };
        var vm = this;
        vm.tree = getTree(dataset);
        // vm.tree = listTree(dataset, "");
        vm.itemClicked = function($item) {
            vm.selectedItem = $item;
            console.log($item, 'item clicked');
        };

        vm.itemCheckedChanged = function($item) {
            $http.post('/url', $item);
            console.log($item, 'item checked');
        };

        return vm;
    }])

//自定义指令treeView,编写成组件