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 {
width: 900px;
overflow: hidden;
}
.details>ul li {
float: left;
width: 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;
width: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;
width: 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-width: 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;
width: 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;
width: 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{
width: 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;
width: 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{
width:30px;
height: 34px;
line-height: 14px;
border: 1px solid #ccc;
border-radius: 4px;
}
#pageC select#page_size.page_size{
width: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>
angular实现三级联动的更多相关文章
- angular实现地区三级联动
<!DOCTYPE html><html ng-app="myapp"> <head> <meta charset="UTF-8 ...
- AngularJS系列：表单全解（表单验证，radio必选，三级联动，check绑定，form提交验证）
一.查看$scope -->寻找Form控制变量的位置 Form控制变量 格式:form的name属性.input的name属性.$... formName.inputField.$pristi ...
- js封装的三级联动菜单(使用时只需要一行js代码)
前言 在实际的项目开发中,我们经常需要三级联动,比如省市区的选择,商品的三级分类的选择等等. 而网上却找不到一个代码完整.功能强大.使用简单的三级联动菜单,大都只是简单的讲了一下实现思路. 下面就给大 ...
- 利用select实现年月日三级联动的日期选择效果
× 目录 [1]演示 [2]规划 [3]结构生成[4]算法处理 前面的话 关于select控件,可能年月日三级联动的日期选择效果是最常见的应用了.本文是选择框脚本的实践,下面将对日期选择效果进行详细介 ...
- jQuery省市区三级联动插件
体验效果:http://hovertree.com/texiao/bootstrap/4/支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> &l ...
- jQuery - 全国省市县三级联动
最近有空用jquery做了一个全国省市县的三级联动,在以后或许可以用的到 ,遗憾的是我还没用封装,等有空看能不能封装成一个插件 废话不多说,贴上代码: <!doctype html> &l ...
- 省市区三级联动 pickerView
效果图 概述 关于 省市区 三级联动的 pickerView,我想大多数的 iOS 开发者应该都遇到过这样的需求.在遇到这样的需求的时候,大多数人都会觉的这个很复杂,一时无从下手.其实真的没那么复杂. ...
- webForm（三）——三级联动
三级联动 首先附图一张,初步认识一下什么是三级联动: 注:选第一个后面两个变,选第二个,最后一个改变. 其次,做三级联动需要注意的方面:①DropD ...
- C#三级联动
1.运用ComboBox的控件建立效果,如右图: 2.建立三个表,第一个Province表: PID,PName;第二个为city表: CId,CName,PId;第三个为coun表:CounID,C ...
随机推荐
- ASP.NET Core-Docs：在 ASP.NET Core 中启用跨域请求（CORS）
ylbtech-ASP.NET Core-Docs:在 ASP.NET Core 中启用跨域请求(CORS) 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 1. ...
- JNI使用常见错误
1. java.lang.UnsatisfiedLinkError: Couldn't load hello: **findLibrary returned null** 解决方案: * 如果处理器平 ...
- 依赖注入框架之androidannotations
主页: http://androidannotations.org/ 用途: 1. 使用依赖注入Views,extras,System Service,resources 2. 简化线程模型 3. 事 ...
- mysql 安装 和 mysql 远程连接
一.mysql安装 1.下载MySQL数据库可以访问官方网站:https://www.mysql.com/ 2.点击DOWNLOADS模块下的Community模块下的MySQL Community ...
- linux配置信息收集
CPU型号:# cat /proc/cpuinfo |grep "model name"# cat /proc/cpuinfo | grep name | cut -f2 -d: ...
- PS技巧集合
一.把图片变模糊 图像——调整——色阶——输出色阶——滤镜——模糊——高斯模糊——半径 二.图片换色 点击右下角弹层下方的“fx”——颜色叠加——色样颜色
- 作业类型维护流程(CO)
一.建立作业类型——kl01 目的: 藉由做作業類型執行生產報工 目錄路徑: 會計à成本控制à成本中心會計à主檔資料à作業類型à個別處理à KL01 - 建立 Transaction Code: ...
- linux下抓取tomcat相关内存、线程、文件句柄等快照，用于故障排除。
以下脚本推荐放在定时任务里,写好cron表达式,在不影响业务系统的情况下dump一些信息分析系统性能瓶颈以及故障排除. 因为每次dump的时候jvm会暂停(几秒到几十秒不等).所以在生产系统使用时慎用 ...
- dependencies与devDependencies之间的区别
dependencies:依赖 dev:develop(开发)的简写 1.--save-dev 和--save 的区别: 我们在使用npm install 安装模块或插件的时候,有两种命令把它们写入到 ...
- jvm的学习笔记：二、类的初始化，代码实战（2）
常量在编译阶段,会存在调用这个常量的方法的所在的类的常量池当中 System.out.println(MyParent2.str); 输出: hello parent2 依据:在MyTest2类调用M ...