AngularJS内置服务$http的使用——用户权限管理实例

1.实现目标：

选择用户角色，自动勾选权限。

(1)MysqL 数据库的建立

(2)ng-repeat指令显示用户权限

(3)ng-checked指令控制用户权限

3.实例

(1)MysqL 数据库的建立

t_role表

id rolename

1 系统管理员

2 总经理

r_right表

id rightname ischecked

1 人员管理 0

2 合同管理 0

3 项目管理 0

4 新闻公告 0

r_role_right表

id roleid rightid

1 1 1

2 1 2

3 1 3

4 1 4

5 2 1

6 2 2

(2)代码

<!DOCTYPE html@H_301_141@>
<html @H_301_141@lang=@H_301_141@"en"@H_301_141@>
<head@H_301_141@>
    <Meta @H_301_141@charset=@H_301_141@"UTF-8"@H_301_141@>
    <title@H_301_141@>AngularJS $http</title@H_301_141@>

    <link @H_301_141@rel=@H_301_141@"stylesheet" @H_301_141@href=@H_301_141@"css/foundation.min.css"@H_301_141@>
    <style @H_301_141@type=@H_301_141@"text/css"@H_301_141@>
        html@H_301_141@,body@H_301_141@{font-size@H_301_141@:14px@H_301_141@;}
    </style@H_301_141@>
</head@H_301_141@>
<body @H_301_141@style=@H_301_141@"@H_301_141@padding@H_301_141@:10px@H_301_141@;" @H_301_141@ng-app=@H_301_141@"app"@H_301_141@>
    <div @H_301_141@ng-controller=@H_301_141@"MyCtrl"@H_301_141@>
        <fieldset@H_301_141@>
            <legend@H_301_141@>用户角色</legend@H_301_141@>
            <select @H_301_141@ng-model=@H_301_141@"curselect"@H_301_141@>
                <option@H_301_141@>--请选择--</option@H_301_141@>
                <option @H_301_141@ng-repeat=@H_301_141@"r in roles" @H_301_141@value=@H_301_141@{{@H_301_141@r@H_301_141@.@H_301_141@id@H_301_141@}}@H_301_141@>{{r@H_301_141@.rolename}}</option@H_301_141@>
            </select@H_301_141@>
        </fieldset@H_301_141@>
        <fieldset@H_301_141@>
            <legend@H_301_141@>权限管理</legend@H_301_141@>
            <span @H_301_141@ng-repeat=@H_301_141@"right in rights"@H_301_141@>
                <input @H_301_141@type=@H_301_141@"checkBox" @H_301_141@ng-checked=@H_301_141@"right.ischecked"@H_301_141@>&nbsp;@H_301_141@{{right@H_301_141@.rightname}}
            </span@H_301_141@>
        </fieldset@H_301_141@>
    </div@H_301_141@>
</body@H_301_141@>
<script @H_301_141@src=@H_301_141@"js/angular.min.js"@H_301_141@></script@H_301_141@>
<script @H_301_141@src=@H_301_141@"app.js"@H_301_141@></script@H_301_141@>
</html@H_301_141@>

angular@H_301_141@.module('app'@H_301_141@,[]) .controller@H_301_141@('MyCtrl'@H_301_141@,function @H_301_141@($scope,$http) { $scope.id@H_301_141@=" "@H_301_141@; $scope.name@H_301_141@=" "@H_301_141@; $scope.roles @H_301_141@= []; $scope.rights @H_301_141@= []; $scope.curselect @H_301_141@= []; $http.$watch('curselect'@H_301_141@,function @H_301_141@() { loadRoleRight(); }) function @H_301_141@loadRoleRight() { $http.post('http://127.0.0.1:80/user/getRoleRight'@H_301_141@,{roleid@H_301_141@:$scope.curselect@H_301_141@}) .success(function @H_301_141@(resp) { var @H_301_141@rights = resp; for@H_301_141@(var @H_301_141@i = 0; i < $scope.rights@H_301_141@.length@H_301_141@; i++){ $scope.rights@H_301_141@[i].ischecked @H_301_141@= false@H_301_141@; for@H_301_141@(var @H_301_141@j = 0; j < rights.length@H_301_141@; j++){ if@H_301_141@($scope.rihgts[i].id @H_301_141@== rights[j].rightid){ $scope.rights@H_301_141@[i].ischecked @H_301_141@= true@H_301_141@; } } } }) } function @H_301_141@init(){ $http.get('http://127.0.0.1:80/user/getRoles'@H_301_141@) .success(function @H_301_141@(resp) { $scope.roles @H_301_141@= resp; }) $http.get('http://127.0.0.1:80/user/getRights'@H_301_141@) .success(function @H_301_141@(resp) { $scope.roles @H_301_141@= resp; }) } init(); })

后台Java代码如下：

public void getRoles(){
List<Role> roles = Role.dao.find("select * from t_role");
renderJson(roles);
}

public void getRights(){
List<Right> rights = Right.dao.find("select * from t_right");
renderJson(rights);
}

public void getRoleRight(){
String roleid = getPara("roleid");
List<Record> rights = Db.find("select * from t_role_right where roleid=?",roleid);
renderJson(rights);
}

(3)运行界面

原文链接：https://www.f2er.com/angularjs/148896.html

AngularJS内置服务$http的使用——用户权限管理实例

猜你在找的Angularjs相关文章