今天完成的事:
1.学习风琴菜单
使用的其实就是ui-bs的collapsed
<div class="panel-default" ng-repeat="manage in manages">
<button type="button" class="gray" ng-click="Turn()" >{{manage.text}}
<img class="tool" src="../img/tool.png">
<img class="right" ng-class="{transform:turn}" src="../img/right.png">
</button>
<div uib-collapse="isCollapsed">
<div ng-repeat="a in manage.subset" class="organli" ui-sref="home.{{a.id}}">{{a.text}}</div>
</div>
</div>
js里面只需简单的控制下图标转动,顺便把控制展开写到点击事件里,
$scope.Turn = function () {
this.isCollapsed = !this.isCollapsed;//控制当前模块展开或收缩
if (this.turn == true) {
this.turn = false;//控制箭头转向
} else {
this.turn = true;
}
}
因为后端那时候还没给好登录后直接获取用户权限的接口,所以就还没写。明天加一下就OK了。
2.完成模块管理
模块管理的新增,删除,编辑,搜索都已完成。
3.写角色管理
角色的搜索,删除都写好。
然后在渲染多选框这里卡住了。这里也是权限管理中最麻烦的一点。
①首先需要先通过模块管理的接口获取所有的模块,渲染出多选框。这一步很简单。
$http({
method: 'get',
url: '/a/admin/modules/all'
}).then(function (res) {
console.log(res.data);
$scope.moduleList = res.data.data; //获取数组用于渲染
②做出全选/全不选功能
通过控制ng-checked来控制全选/全不选
ng-checked="master"
// 全选/不全选
$scope.checkAll = function () {
console.log('vm.parentModel', $scope.parentModel);
if ($scope.master == true) {
$scope.master = false;
$scope.masters = false;
parentModel = false;
} else {
$scope.master = true; //勾选所有父模块
$scope.masters = true; //勾选所有子模块
parentModel = true;
$scope.sonBan = false;
}
}
③父模块未选取时,子模块不可选取
通过设置
ng-disabled="sonBan"
判断父模块是否已点击
ng-model="parentModel"
$scope.changeParent = function () {
if (this.parentModel == false) {
this.sonBan = true; //设置子模块不可选
} else {
this.sonBan = false;
}
}
这两步还有些缺陷,达不到我想要的效果。目前还没完善好
④然后需要通过用户ID获取用户已拥有的权限。然后在多选框中相应的勾选出来。这一步就很困难了。
获取数据不难。
得到ID不难。
难的是如何把对应的多选框给选中。
遇到的问题:
1.恐遇复盘最大难题。
2.又遇到了之前风琴菜单碰到的一个问题。
关于$scope。
今天大概找到原因了。
大概是因为使用了this后,$scope作用域就改变了。
内部可以访问外部,外部不能访问内部。
所以$scope就访问不到了this
收获:
1.安古拉魔法还是很强大的,今天又再次刷了刷熟练度。
2.对多选框的很多使用方法有了一定了解。
评论