console
var app = angular.module('myApp', []);
app.controller('RoleAuthCtrl',
function($scope, $http, $log) {
var self = this;
$scope.ctrl.role = {};
$scope.data = {"body":{"resultList":[{"level":"1","pageTitle":"基本管理","menuId":"base","pid":"10","purl":"root","id":"11"},{"level":"1","pageTitle":"业务中心","menuId":"business","pid":"10","purl":"root","id":"12"},{"level":"1","pageTitle":"分润中心","menuId":"profit","pid":"10","purl":"root","id":"13"},{"level":"2","pageTitle":"客户管理","menuId":"base.user","pid":"11","purl":"base","id":"1101"},{"level":"2","pageTitle":"产品管理","menuId":"base.product","pid":"11","purl":"base","id":"1102"},{"level":"2","pageTitle":"订单管理","menuId":"base.order","pid":"11","purl":"base","id":"1103"},{"level":"2","pageTitle":"数据中心","menuId":"business.data","pid":"12","purl":"business","id":"1201"},{"level":"2","pageTitle":"车机产能","menuId":"business.car","pid":"12","purl":"business","id":"1202"},{"level":"2","pageTitle":"激活数据","menuId":"business.activate","pid":"12","purl":"business","id":"1203"},{"level":"2","pageTitle":"交易记录","menuId":"profit.deal","pid":"13","purl":"profit","id":"1403"},{"level":"3","pageTitle":"新增客户","menuId":"base.user_add","pid":"1101","purl":"base.user","id":"110101"},{"level":"3","pageTitle":"产品新增","menuId":"base.product_add","pid":"1102","purl":"base.product","id":"110201"},{"level":"3","pageTitle":"订单新增","menuId":"base.order_add","pid":"1103","purl":"base.order","id":"110301"},{"level":"1","pageTitle":"接口测试","menuId":"test","pid":"10","purl":"root","id":"99999999"}]},"code":"CD000001","msg":"处理成功"};
$scope.list = [{"level":"1","pageTitle":"基本管理","menuId":"base","pid":"10","purl":"root","id":"11","subMenu":[{"level":"2","pageTitle":"客户管理","menuId":"base.user","pid":"11","purl":"base","id":"1101","subMenu":[{"level":"3","pageTitle":"新增客户","menuId":"base.user_add","pid":"1101","purl":"base.user","id":"110101"}]},{"level":"2","pageTitle":"产品管理","menuId":"base.product","pid":"11","purl":"base","id":"1102","subMenu":[{"level":"3","pageTitle":"产品新增","menuId":"base.product_add","pid":"1102","purl":"base.product","id":"110201"}]},{"level":"2","pageTitle":"订单管理","menuId":"base.order","pid":"11","purl":"base","id":"1103","subMenu":[{"level":"3","pageTitle":"订单新增","menuId":"base.order_add","pid":"1103","purl":"base.order","id":"110301"}]}]},{"level":"1","pageTitle":"业务中心","menuId":"business","pid":"10","purl":"root","id":"12","subMenu":[{"level":"2","pageTitle":"数据中心","menuId":"business.data","pid":"12","purl":"business","id":"1201"},{"level":"2","pageTitle":"车机产能","menuId":"business.car","pid":"12","purl":"business","id":"1202"},{"level":"2","pageTitle":"激活数据","menuId":"business.activate","pid":"12","purl":"business","id":"1203"}]},{"level":"1","pageTitle":"分润中心","menuId":"profit","pid":"10","purl":"root","id":"13","subMenu":[{"level":"2","pageTitle":"交易记录","menuId":"profit.deal","pid":"13","purl":"profit","id":"1403"}]},{"level":"1","pageTitle":"接口测试","menuId":"test","pid":"10","purl":"root","id":"99999999"}];
$scope.ctrl.role.menuIdArr = [];
$scope.result = ['profit', 'profit.deal'];
$scope.isSelected = function(menuId) {
return $scope.result.indexOf(menuId) !== -1;
};
$scope.selectAll = function() {
if ($scope.select_all) {
$scope.ctrl.role.menuIdArr = [];
angular.forEach($scope.list,
function(roleOne) {
roleOne.checked = true;
$scope.ctrl.role.menuIdArr.push(roleOne.menuId);
angular.forEach(roleOne.subMenu,
function(roleTwo) {
roleTwo.checked = true;
$scope.ctrl.role.menuIdArr.push(roleTwo.menuId);
angular.forEach(roleTwo.subMenu,
function(roleThree) {
roleThree.checked = true;
$scope.ctrl.role.menuIdArr.push(roleThree.menuId);
})
})
})
} else {
angular.forEach($scope.list,
function(roleOne) {
roleOne.checked = false;
angular.forEach(roleOne.subMenu,
function(roleTwo) {
roleTwo.checked = false;
angular.forEach(roleTwo.subMenu,
function(roleThree) {
roleThree.checked = false;
})
});
$scope.ctrl.role.menuIdArr = [];
})
}
console.log($scope.ctrl.role.menuIdArr);
};
$scope.selectOne = function($event, $index, menuId) {
angular.forEach($scope.list,
function(roleOne) {
var index = $scope.ctrl.role.menuIdArr.indexOf(roleOne.menuId);
if (roleOne.checked && index === -1) {
$scope.ctrl.role.menuIdArr.push(roleOne.menuId);
angular.forEach(roleOne.subMenu,
function(roleTwo) {
roleTwo.checked = true;
$scope.ctrl.role.menuIdArr.push(roleTwo.menuId);
angular.forEach(roleTwo.subMenu,
function(roleThree) {
roleThree.checked = true;
$scope.ctrl.role.menuIdArr.push(roleThree.menuId);
})
})
} else if (!roleOne.checked && index !== -1) {
$scope.ctrl.role.menuIdArr.splice(index, 1);
angular.forEach(roleOne.subMenu,
function(roleTwo) {
roleTwo.checked = false;
$scope.ctrl.role.menuIdArr.splice(roleTwo.menuId, 1);
if (roleTwo.subMenu !== null) {
angular.forEach(roleTwo.subMenu,
function(roleThree) {
roleThree.checked = false;
$scope.ctrl.role.menuIdArr.splice(roleThree.menuId, 1);
})
}
});
};
})
if ($scope.data.length === $scope.ctrl.role.menuIdArr.length) {
$scope.select_all = true;
} else {
$scope.select_all = false;
}
console.log($scope.ctrl.role.menuIdArr);
};
$scope.selectTwo = function($event, $index, roleOne, menuId) {
angular.forEach(roleOne.subMenu,
function(roleTwo) {
var index = $scope.ctrl.role.menuIdArr.indexOf(roleTwo.menuId);
if (roleTwo.checked && index === -1) {
$scope.ctrl.role.menuIdArr.push(roleTwo.menuId);
angular.forEach(roleTwo.subMenu,
function(roleThree) {
roleThree.checked = true;
$scope.ctrl.role.menuIdArr.push(roleThree.menuId);
})
} else if (!roleTwo.checked && index !== -1) {
$scope.ctrl.role.menuIdArr.splice(index, 1);
angular.forEach(roleTwo.subMenu,
function(roleThree) {
roleThree.checked = false;
$scope.ctrl.role.menuIdArr.splice(roleThree.menuId, 1);
})
}
});
$log.info(roleOne.subMenu.length);
if ($scope.data.length === $scope.ctrl.role.menuIdArr.length) {
$scope.select_all = true;
} else {
$scope.select_all = false;
}
console.log($scope.ctrl.role.menuIdArr);
};
$scope.selectThree = function($event, $index, roleTwo, menuId) {
angular.forEach(roleTwo.subMenu,
function(roleThree) {
var index = $scope.ctrl.role.menuIdArr.indexOf(roleThree.menuId);
if (roleThree.checked && index === -1) {
$scope.ctrl.role.menuIdArr.push(roleThree.menuId);
} else if (!roleThree.checked && index !== -1) {
$scope.ctrl.role.menuIdArr.splice(index, 1);
}
});
$log.info(roleTwo.subMenu.length);
if (roleTwo.subMenu.length === '') {
$scope.select_all = true;
} else {
$scope.select_all = false;
}
if ($scope.data.length === $scope.ctrl.role.menuIdArr.length) {
$scope.select_all = true;
} else {
$scope.select_all = false;
}
console.log($scope.ctrl.role.menuIdArr);
};
self.submit = function() {
$log.log(self.role);
}
});
<div ng-app="myApp">
<div class="row wrapper brole-bottom white-bg page-heading">
<div class="col-lg-10">
<h2>
权限设置
</h2>
<ol class="breadcrumb">
<li>
<a ui-sref="index.main">
首页
</a>
</li>
<li>
<a ui-sref="role.list">
权限管理
</a>
</li>
<li class="active">
<strong>
编辑权限
</strong>
</li>
</ol>
</div>
<div class="col-lg-2">
</div>
</div>
<div class="wrapper wrapper-content animated fadeInRight" ng-controller="RoleAuthCtrl as ctrl">
<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>
修改权限
<small>
请选择权限
</small>
</h5>
</div>
<div class="ibox-content">
<form role="form" class="form-horizontal" novalidate name="role_auth_form"
ng-submit="ctrl.submit()" name="roleAuthForm">
<input type="hidden" name="userLevel" value="{{userLevel}}" ng-model="ctrl.role.userLevel"
ng-init="ctrl.role.userLevel=userLevel" />
<input type="hidden" name="userID" value="{{userID}}" ng-model="ctrl.role.userID"
ng-init="ctrl.role.userID=userID" />
<input type="hidden" name="requestID" value="{{requestID}}" ng-model="ctrl.role.requestID"
ng-init="ctrl.role.requestID=requestID" />
<input type="hidden" name="roleID" value="{{roleID}}" ng-model="ctrl.role.roleID"
/>
<div class="row">
<div class="col-lg-6">
<label for="flag">
全选
<input id="flag" type="checkbox" ng-model="select_all" ng-change="selectAll()">
</label>
<ul>
<li ng-repeat="roleOne in list">
<input type="checkbox" id="{{roleOne.menuId}}" value="{{roleOne.menuId}}" ng-model="roleOne.checked"
ng-change="selectOne($event,$index,roleOne.menuId)" ng-checked="isSelected(roleOne.menuId)">
<label for="{{roleOne.menuId}}">
{{roleOne.pageTitle}}
</label>
<ul ng-if="roleOne.subMenu">
<li ng-repeat="roleTwo in roleOne.subMenu">
<input type="checkbox" id="{{roleTwo.menuId}}" value="{{roleTwo.menuId}}"
ng-model="roleTwo.checked" ng-change="selectTwo($event,$index,roleOne,roleTwo.menuId)"
ng-checked="isSelected(roleTwo.menuId)">
<label for="{{roleTwo.menuId}}">
{{roleTwo.pageTitle}}
</label>
<ul ng-if="roleTwo.subMenu">
<li ng-repeat="roleThree in roleTwo.subMenu">
<input type="checkbox" id="{{roleThree.menuId}}" value="{{roleThree.menuId}}"
ng-model="roleThree.checked" ng-change="selectThree($event,$index,roleTwo,roleThree.menuId)"
ng-checked="isSelected(roleThree.menuId)">
<label for="{{roleThree.menuId}}">
{{roleThree.pageTitle}}
</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="clearfix visible-xs-block">
</div>
<div class="col-lg-6">
</div>
</div>
<div class="hr-line-dashed">
</div>
<div class="form-group">
<div class="col-sm-4 col-sm-offset-2">
<button class="btn btn-white" type="reset" ui-sref="role.list">
取消
</button>
<button class="btn btn-primary" type="submit" ng-disabled="role_auth_form.$invalid">
新增产品
</button>
</div>
</div>
<pre>
form = {{ctrl.role }}
</pre>
</form>
</div>
</div>
</div>
</div>
</div>
</div>