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>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>AngularJS $http</title>

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

angular.module('app',[])
    .controller('MyCtrl',function ($scope,$http) {
        $scope.id=" ";
        $scope.name=" ";
        $scope.roles = [];
        $scope.rights = [];
        $scope.curselect = [];

        $http.$watch('curselect',function () {
            loadRoleRight();
        })

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

            $http.get('http://127.0.0.1:80/user/getRights')
                .success(function (resp) {
                    $scope.roles = 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相关文章