angular实现三级联动

(function(angular) {
    'use strict';
    var module = angular.module('timecube.shopManage.group.ctrls', ['timecube.shopManage.group.services']);
    module.controller(
        'bigBossGroupCtrl', ['$scope', 'groupService','$cookieStore','baseModal', 'paginationUtil', '$filter', 'baseInfoService', 'notifyService', 'securityService', '$modal','toaster',
            function($scope, groupService,$cookieStore,baseModal, paginationUtil, $filter, baseInfoService, notifyService, securityService, $modal,toaster) {
                var ctrl = this;
                $scope.isAdmin = $cookieStore.get('isAdmin');
                ctrl.groupInfoAddress = {};
                $scope.selectedUser={};
                $scope.selectedUserType={};
                $scope.seletedGroup=[];
                $scope.typeToGroup=[
                    {
                        type: 1,
                        typeName:'管理员'
                    },{
                        type: 2,
                        typeName:'好友'
                    }];
                $scope.selectedUserType.type = $scope.typeToGroup[0].type;
                //$scope.pageSize = paginationUtil.getDefaultPageSize();
                var groupInfoDetail=function () {
                    groupService.groupDetail().then(function (data) {
                        //console.log(data);
                        $scope.cmpName=data.cmpName;
                        ctrl.groupInfoAddress = data;
                        ctrl.addressName = {};
                        ctrl.addressCodeList = {};
                        ctrl.addressName.cmpName = data.cmpName;
                        ctrl.addressName.phones = data.phones;
                        ctrl.addressName.cmpAddress = data.cmpAddress;
                        var country = data.country;
                        $scope.def_country = country;
                        var province = data.province;
                        $scope.def_province = province;
                        var city = data.city;
                        $scope.def_city = city;
                        var district = data.district;
                        $scope.def_district = district;
                        /*省市区级联*/
                        groupService.cityC().then(function (data) {
                            ctrl.addressCodeList.countryList = data;
                            angular.forEach(data, function (v) {
                                if (v.code == country) {
                                    ctrl.addressName.countryName = v.name;
                                }
                            });
                            return groupService.cityC(country);
                        }).then(function (data) {
                            ctrl.addressCodeList.provinceList = data;
                            angular.forEach(data, function (v) {
                                if (v.code == province) {
                                    ctrl.addressName.provinceName = v.name;
                                }
                            });
                            return groupService.cityC(province);
                        }).then(function (data) {
                            ctrl.addressCodeList.cityList = data;
                            angular.forEach(data, function (v) {
                                if (v.code == city) {
                                    ctrl.addressName.cityName = v.name;
                                }
                            });
                            return groupService.cityC(city)
                        }).then(function (data) {
                            ctrl.addressCodeList.districtList = data;
                            angular.forEach(data, function (v) {
                                if (v.code == district) {
                                    ctrl.addressName.districtName = v.name;
                                }
                            });
                        }).finally(function () {
                            //console.log(ctrl.addressName);
                        });
                        return groupService.cmpCreator();
                    }).then(function (data) {
                        ctrl.addressName.cmp_Creator = data.username;
                    }).catch(function (data) {
                        //
                    }).finally(function () {
                        //console.log(ctrl.addressName);
                    });
                };
                /**邀请好友加入群组分组树**/
                groupService.getDepartments().then(function(data){
                    //console.log(data);
                    $scope.dataLists = data.dataLists;
                    //console.log(data.dataLists);
                    $scope.isZktimeUser = baseInfoService.getBaseInfo().isZktimeUser;
                    // $scope.states = states;
                    /*展开*/
                    $scope.toggleDept = function(scope) {
                        scope.toggle();
                        var toggleElement = scope.$element.find('.clickable:first');
                        if (scope.collapsed) {
                            toggleElement.addClass('glyphicon-play').removeClass('glyphicon-triangle-bottom');
                        } else {
                            toggleElement.addClass('glyphicon-triangle-bottom').removeClass('glyphicon-play');
                        }
                    };
                });
                $scope.treeSelected=function() {
                    var $li=$("#departmentsContainer>ol>li");
                    $.each($li,function(index,obj){
                        var radios= $(obj).find("input[type='radio']");
                        $.each(radios,function(index2,obj2){
                            $(obj2).attr('name','tree'+index);
                        });
                    });
                };
                $scope.selectGroup=function(node) {
                    //$scope.seletedGroup = node;
                    $scope.seletedGroup=[];
                    var $li=$("#departmentsContainer>ol>li");
                    $.each($li,function(index,obj){
                        var radios= $(obj).find("input[type='radio']");
                        $.each(radios,function(i,obj2){
                            if(obj2.checked){
                                var genderChecked=obj2.value;
                                ($scope.seletedGroup).push(genderChecked);
                                console.log(genderChecked);
                            }
                        });
                    });
                    var classifyIds=$scope.seletedGroup;
                    console.log(classifyIds);
                    var cmpId = baseInfoService.getBaseInfo().cmpId;
                    var queryParams={
                        'companyId':cmpId,
                        'classifyIdList':classifyIds
                    };
                    console.log(queryParams);
                    /*将要被邀请的好友列表*/
                    groupService.OneBossUserUrlList(queryParams).then(function(data) {
                        console.log(data);
                        $scope.userList =data;
                        if ($scope.userList.length >0 && !$scope.selectedUser.phone) {
                            $scope.selectedUser.phone = data[0].phone;
                        }
                    });
                };
                /*邀请按钮，提交邀请*/
                $scope.enterG=function () {
                    var type=$scope.selectedUserType.type;
                    var inviterId= baseInfoService.getBaseInfo().empId;
                    var companyId = baseInfoService.getBaseInfo().cmpId;
                    var cmpName=$scope.cmpName;
                    var phoneOrEmail=$scope.selectedUser.phone;
                    var classifyIds=($scope.seletedGroup).join(',');
                    console.log(classifyIds);
                    var queryParams={
                        "inviterId": inviterId,
                        "companyId": companyId,
                        "cmpName": cmpName,
                        "phoneOrEmail": phoneOrEmail,
                        "classifyIds": classifyIds,
                        "type": type,
                        "remark": "加入群组"
                    };
                    groupService.friendEnterGroup(queryParams).then(function(data) {
                        //console.log(data);
                        if(data.code==="00000000"){
                            toaster.pop({
                                type: 'success',
                                body: $translate.instant('JOIN_GROUP_SUCCESSFULLY'),
                                timeout: 1500
                            });
                            (angular.element("#myModal")).modal('hide');
                        }else{
                            toaster.pop({
                                type: 'error',
                                body: data.message || '',
                                timeout: 1500
                            });
                        }
                    });
                };
                /**调用封装数据**/
                groupInfoDetail();
                /**好友列表和店铺列表**/
                $scope.employeeList = [];
                $scope.shopDeviceList=[];
                $scope.pageSize = paginationUtil.getDefaultPageSize();
                $scope.pageSize = 10;
                $scope.callServer = function(tableState) {
                    if (tableState) {
                        $scope.tableState = tableState;
                    } else {
                        return false;
                    }
                    $scope.isLoading = true;
                    groupService.getShopDevice($scope.tableState).then(function (data) {
                        console.log(data);
                        $scope.isLoading = false;
                        $scope.shopDeviceList=data.payload.results.dataLists;
                        tableState.pagination.numberOfPages = Math.ceil(data.payload.results.totalRecords / tableState.pagination.number)
                    }, function() {
                        $scope.isLoading = false;
                    })
                };
                $scope.callServer1 = function(tableState) {
                    if (tableState) {
                        $scope.tableState = tableState;
                    } else {
                        return false;
                    }
                    $scope.isLoading = true;
                    groupService.getFriendsList($scope.tableState).then(function(data) {
                        console.log(data);
                        $scope.isLoading = false;
                        $scope.employeeList = data.payload.results.dataLists;
                        tableState.pagination.numberOfPages = Math.ceil(data.payload.results.totalRecords / tableState.pagination.number)
                    }, function() {
                        $scope.isLoading = false;
                    });
                };
                /**刷新列表**/
                var refresh = function() {
                    if ($scope.tableState) {
                        $scope.tableState.pagination.start = 0;
                    }
                    $scope.callServer($scope.tableState);
                };
                /**编辑群组信息弹出层**/
                $scope.modifyEditGroup = function () {
                    $modal.open({
                        animation: true,
                        templateUrl: 'tpl/bigboss/groups/editGroupManage.html',
                        backdrop: 'static',
                        controller: 'editGroup',
                        resolve: {
                            addressCodeList: function () {
                                return ctrl.addressCodeList;
                            },
                            groupInfoAddres: function () {
                                return ctrl.groupInfoAddress;
                            },
                            addressName: function () {
                                return ctrl.addressName;
                            }
                        }
                    }).result.then(function () {
                        notifyService.success('提交成功');
                        /*刷新页面数据*/
                        groupInfoDetail();
                    }, function () {
                        groupInfoDetail();
                    });
                };
                /*默认选中第一个数据*/
                $scope.groupInfoAddres = {};
                groupService.cityC().then(function (data) {
                    $scope.countrys = data;
                    //console.log($scope.def_province);
                    if ($scope.countrys.length === 1 && !$scope.groupInfoAddres.country) {
                        $scope.groupInfoAddres.country = data[0].code;
                    }
                    if ($scope.def_country) {
                        $scope.groupInfoAddres.country = $scope.def_country;
                        $scope.def_country = null;
                    }
                });
            }]
    ).controller(
        'editGroup', ['$scope', '$modalInstance','addressCodeList','groupInfoAddres','addressName','baseInfoService','groupService','toaster',
            function($scope, $modalInstance,addressCodeList,groupInfoAddres,addressName,baseInfoService,groupService,toaster) {
                $scope.addressCodeList=addressCodeList;
                $scope.groupInfoAddres =groupInfoAddres;
                $scope.addressName =addressName;
                $scope.cancel = function() {
                    $modalInstance.dismiss();/*退出*/
                };
                /**编辑后，提交数据**/
                $scope.confirm = function(){
                    var infoGroup = {
                        "cmpName": addressName.cmpName,
                        "cmp_Creator": addressName.cmp_Creator,
                        "phones": addressName.phones,
                        "country": groupInfoAddres.country,
                        "province": groupInfoAddres.province,
                        "city":groupInfoAddres.city,
                        "district":groupInfoAddres.district,
                        "cmpAddress": addressName.cmpAddress
                    };
                    //console.log(infoGroup);
                    groupService.saveG(infoGroup).then(function (data) {
                        console.log(data);
                        if (data.code === '00000000') {
                            $modalInstance.close();
                        } else {
                            toaster.pop({
                                type: 'error',
                                body: $translate.instant(data.message) || '',
                                timeout: 1500
                            });
                        }
                    });
                };
                /*监控级联变化*/
                $scope.$watch('groupInfoAddres.country', function (newValue,oldValue) {
                    //$scope.groupInfoAddres.province = undefined;
                    if (newValue == "" || typeof newValue == "undefined" || newValue == null || isNaN(newValue)) {
                        $scope.addressCodeList.provinceList = [];
                        $scope.groupInfoAddres.province = undefined;
                        return;
                    }
                    //console.log($scope.groupInfoAddres.country);
                    if(newValue != oldValue){
                        groupService.cityC($scope.groupInfoAddres.country).then(function (data) {
                            $scope.addressCodeList.provinceList = data;
                            if ($scope.def_province != null && $scope.def_province != '') {
                                $scope.groupInfoAddres.province = $scope.def_province;
                                $scope.def_province = null;
                            }
                        });
                    }
                });
                $scope.$watch('groupInfoAddres.province', function (newValue,oldValue) {//, oldValue
                    if (newValue == "" || typeof newValue == "undefined" || newValue == null) {
                        $scope.addressCodeList.cityList = [];
                        $scope.groupInfoAddres.city = undefined;
                        return;
                    }
                    if(newValue != oldValue) {
                        groupService.cityC($scope.groupInfoAddres.province).then(function (data) {
                            $scope.addressCodeList.cityList = data;
                            $scope.groupInfoAddres.city = addressCodeList.cityList[0].code;
                        });
                    }

                });
                $scope.$watch('groupInfoAddres.city', function (newValue,oldValue) {
                    //$scope.groupInfoAddres.district = undefined;
                    if (newValue == "" || typeof newValue == "undefined" || newValue == null) {
                        $scope.addressCodeList.districtList = [];
                        $scope.groupInfoAddres.district = undefined;
                        return;
                    }
                    if(newValue != oldValue) {
                        groupService.cityC($scope.groupInfoAddres.city).then(function (data) {
                            //console.log(data);
                            $scope.addressCodeList.districtList = data;
                            if (data.length > 0) {
                                $scope.groupInfoAddres.district = addressCodeList.districtList[0].code;
                            }
                        });
                    }
                });
            }
        ]);
})(angular);/*HTML**/

<style>
    .workspace-title-container {
         border-bottom: none;
    }
    .details ul {
         900px;
        overflow: hidden;
    }
    .details>ul li {
        float: left;
         440px;
        overflow: hidden;
    }
    ol, ul {
        list-style: none outside none;
    }
    .navbar-inverse {
        background: none;
        border: none;
    }
    .navbar-inverse {
    border-bottom: 1px solid #ccc;
    }
    .popup_content ul.nav.navbar-nav > li:last-child {
        border: none;
    }
    .popup_content ul.nav.navbar-nav > li {
        border: none;
    }
    #deviceManage_content_tab ul li.tab_td1,body div.actions-container div#content.content div.details ul#details_left.details_left li,body div.actions-container div#content.content div.ng-scope table{
        line-height:42px;
        font-size: 15px;
    }
    .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus,.navbar-inverse .navbar-nav > li > a:active{
        color: white;
        background: #EB6101;
    }
    .navbar-inverse .navbar-nav{
        margin-top: 10px;
    }
    .navbar-inverse .navbar-nav > li > a{
        color: black;
        background:white;
        border: 1px solid #ccc;
        padding:10px 15px;
        margin-right: 2px;
        border-bottom: none;
        border-radius: 4px 4px 0 0;
    }
    div #content div.popup_content div.ng-scope .tab-pane .content_tab>ul li{
        float: left;
        150px;
    }
    div #content div.popup_content div.ng-scope .tab-pane .content_tab>ul {
        overflow: hidden;
        border-bottom: 1px solid #ccc;
        color: #333;
    }
    .workspace-title-container .actions-container {
         float:none;
    }
    thead th{
        text-align: left;
        font-size: 16px;
         150px;
        border-bottom: 1px solid #ccc;
        color:#333;
    }
    tbody>tr{
        font-size: 14px;
    }
    tbody>tr:hover{
        background:#d7d8dc;
    }
    body div.actions-container div#content.content div.shopList_paging{
        line-height:30px;
        font-size: 16px;
    }
/*!*编辑样式*!*/
    .shop_popup_content {
        min- 500px;
        padding: 20px;
        overflow: auto;
        position: relative;
    }
    .shop_popup_content_left li {
        margin-bottom: 6px;
    }
    .shop_popup_content_left li {
        height: 36px;
        line-height: 36px;
        margin-bottom: 20px;
    }
    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
        margin: 0;
        padding: 0;
        vertical-align: baseline;
    }
    .shop_popup_content_right input[type='text'], .shop_popup_content_right input[type='tel'] {
        height: 36px;
         192px;
        border: 1px solid #d5d5d5;
        border-radius: 4px;
        margin-bottom: 20px;
        padding: 2px 4px;
    }
    .shop_popup_content_left li {
        padding-right: 8px;
    }
    .shop_popup_content_right select {
        height: 36px;
         110px;
        border: 1px solid #d5d5d5;
        border-radius: 4px;
        margin-bottom: 20px;
        padding: 4px;
    }
    .shop_popup_content_left li {
        margin-bottom: 6px;
    }
    .shop_popup_content_left li {
        height: 36px;
        line-height: 36px;
        margin-bottom: 20px;
    }
    li{
        list-style: none;
    }
    body div.modal-dialog.modal-lg div.modal-content{
         700px;
    }
    .modal-header {
        border-bottom: 1px solid #999;
    }
    .modal-footer {
        padding: 15px;
        text-align: center;
        border-top: 1px solid #e5e5e5;
    }
    .modal-footer>button{
        padding:8px 30px;
    }
    .modal-title a {
        display: block;
         24px;
        height: 24px;
        float: right;
        margin-right: 20px;
        background: url(../../img/img_close.png) no-repeat;
    }
    .modal-title span{
        font-size: 20px;
        font-weight: bold;
        color:#666;
    }
    body div.shop_popup_content ul.shop_popup_content_left.pull-left>li span{
        color:red;
    }
    #menuTree div.col-lg-12.col-xs-12.workspace-main-container,#departmentsContainer ol li div span.tree-node-content-container{
        padding-left:0;
        padding-right: 0;
        font-size: 14px;
    }
    .treeContainer > ol > li div {
        height: 40px;
        line-height: 40px;
    }
    .treeContainer .tree-node-content-container {
        padding: 0 0 0 30px;
    }
    #deviceManage_content_tab ul.tab_tr li.tab_td1{
        padding-left:15px;
    }
    .navbar-inverse .navbar-nav li.active a{
        color:#EB6101;
    }
    .nav.navbar-nav .selected {
        color:white;
        background: #EB6101;
    }
    /*shopDevice样式*/
    #pageC div{
        display: inline-block;
    }
    .pagination>span{
        padding: 5px 12px;
        margin:0;
        border: 1px solid #ccc;
    }
    .page_box .change_page>input,#pageC select#page_size.page_size{
        30px;
        height: 34px;
        line-height: 14px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    #pageC select#page_size.page_size{
        60px;
    }
    .fa {
        font-size: 24px;

    }
</style>
<div class="row workspaceContainer" ng-controller="bigBossGroupCtrl as adc">
    <div class="col-lg-10 col-md-9 col-sm-9 col-xs-12 workspace-main-container">
        <div class="workspace-main card">
            <div class="workspace-title-container">
                <div class="title">我的品牌<i id="editGroup" class="icon-zk-edit clickable" tooltip="编辑品牌" ng-click="modifyEditGroup()" ng-show="isAdmin==true" style="color:#EB6101;font-size: 14px;margin-left: 6px;cursor:pointer"></i></div>
            </div>
            <div class="actions-container col-lg-12" style="background: white;margin-top: 2px;min-height: 490px">
                <div id="content" class="content">
                    <div class="details">
                        <ul class="details_left" id="details_left">
                            <li>
                                <span>品牌名称：</span>
                                <span id="cmpName">{{adc.addressName.cmpName}}</span>
                            </li>
                            <li>
                                <span>负责人：</span>
                                <span id="groupOwner">{{adc.addressName.cmp_Creator}}</span>
                            </li>
                            <li>
                                <span>联系方式：</span>
                                <span id="groupOwnerContact">{{adc.addressName.phones}}</span>
                            </li>
                            <li>
                                <span>所在地：</span>
                                <span id="groupBelongs">{{adc.addressName.countryName}} {{adc.addressName.provinceName}} {{adc.addressName.cityName}} {{adc.addressName.districtName}}</span>
                            </li>
                            <li>
                                <span>详细地址：</span>
                                <span id="addressDetail">{{adc.addressName.cmpAddress}}</span>
                            </li>
                        </ul>
                        <div style="clear:both;"></div>
                    </div>
                    <div class="popup_content">
                        <nav class="navbar navbar-inverse" role="navigation">
                            <ul class="nav navbar-nav">
                                <li><a ui-sref="app.groupManagement.groupDevice" ng-class="{selected: routerName=='app.groupManagement.groupDevice'||routerName=='app.groupManagement'}">分组管理</a></li>
                                <li><a ui-sref="app.groupManagement.friendsList" ng-class="{selected: routerName=='app.groupManagement.friendsList'}">好友列表</a></li>
                                <li><a ui-sref="app.groupManagement.shopDevice"  ng-class="{selected: routerName=='app.groupManagement.shopDevice'}">店铺管理</a></li>
                            </ul>
                        </nav>
                        <div ui-view=""></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div ng-include="'tpl/blocks/nav.html'"></div>
</div>