AngularJS內建服務$http的使用——使用者許可權管理例項
1.實現目標：
選擇使用者角色，自動勾選許可權。
2.
(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"> {{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)執行介面
