发表于: 2019-12-29 23:08:22

1 1276


今天完成的事:

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.对多选框的很多使用方法有了一定了解。



返回列表 返回列表
评论

    分享到