管理表单示例
image
目录结构:
image
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" href="../vendor/bootstrap3/css/bootstrap.css">
<link rel="stylesheet" href="index.css">
<script src="../vendor/bootstrap3/js/jquery.js"></script>
<script src="../vendor/bootstrap3/js/bootstrap.js"></script>
<script src="../vendor/bootstrap3/js/angular.js"></script>
<script src="index.js"></script>
</head>
<body ng-controller="ctrl">
<div>
<table id="clusterTable" class="table table-bordered table-hover">
<thead>
<tr>
<th>序号</th>
<th>集群名称</th>
<th>创建者</th>
<th>创建时间</th>
<th>状态信息</th>
<th>查看详情</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in clusterGroups">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.owner}}</td>
<td>{{item.date}}</td>
<td>{{item.state}}</td>
<td style="width: 300px; text-align: center">
<button class="btn btn-success">启动全部</button>
<button class="btn btn-danger">停止全部</button>
<slide-down></slide-down>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
index.js:
(function () {
angular
.module("app", [])
.controller("ctrl", ["$scope", "$http", function ($scope, $http) {
$scope.clusterGroups = [];
$http.get("./clusterGroups.json").then(
function (res) {
$scope.clusterGroups = res.data;
},
function (res) {
console.log(res);
}
)
}])
.directive("slideDown", function ($compile) {
return {
restrict: 'AE',
replace: true,
template: `<button class="btn btn-primary" ng-click="showDetails()">展开集群</button>`,
link: function (scope, element, attributes, controller) {
let html = `<cluster-details item-id="item.id"></cluster-details>`;
element.tog = false;
scope.showDetails = function () {
if (element.tog === false) {
$(element).children("button").text("折叠集群");
$(element).parent().parent().after($compile(html)(scope));
element.tog = true;
} else {
$(element).children("button").text("展开集群");
$(element).parent().parent().next().remove();
element.tog = false;
}
}
}
}
})
.directive("clusterDetails", ["$http", function ($http) {
return {
restrict: 'AE',
replace: true,
scope: {
itemId: "=itemId"
},
templateUrl: "./clusterDetails.html",
link: function (scope, element, attributes, controller) {
scope.cluster = [];
$http.get("./cluster/cluster_" + scope.itemId + ".json").then(
function (res) {
scope.cluster = res.data;
},
function (res) {
console.log(res);
}
);
}
}
}])
})();
clusterDetails.html:
<tr>
<td colspan="100" style="padding: 5px; background-color: #efefef;">
<table class="table table-bordered table-hover" style="width: 100%; margin: 0;">
<thead>
<tr>
<th>序号</th>
<th>地址</th>
<th>端口</th>
<th>目录</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in cluster">
<td>{{item.id}}</td>
<td>{{item.ip}}</td>
<td>{{item.port}}</td>
<td>{{item.dir}}</td>
<td>{{item.state}}</td>
<td style="width: 200px; text-align: center">
<button class="btn btn-success">启动</button>
<button class="btn btn-danger">停止</button>
<button class="btn btn-primary">命令</button>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
