我有一个在HTML上有这段代码的表格(这是菜单(
<div class="panel-body">
<table class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Periode</th>
<th>Lihat</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>April 2017 - Juni 2017</td>
<td><button ng-if="vm.loadpage!=raw.id"
class="btn btn-primary btn-sm"
ng-click="vm.views(raw.id,raw.name)">View</button>
<span ng-if="vm.loadpage==raw.id">
<img src="/images/loading/gears.gif" width="50" />
</span>
</td>
</tr>
</tbody>
</table>
</div>
这是我的 HTML 中的表格
<div class="panel-heading">
<i class="fa fa-bell fa-fw"></i> <b>Periode April 2017 - Juni 2017 </b>
</div>
<html>
<head>
<style>
<table> {
width:100%;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 20px;
text-align: left;
}
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
background-color: black;
color: white;
}
</style>
</head>
<body>
<table id="t01">
<tr>
<th>Periode</th>
<th>Jumlah Buyer</th>
</tr>
<tr>
<td>April 2017 - Juni 2017</td>
<td>114</td>
</tr>
<tr>
<td>Total</td>
<td>114</td>
</tr>
</table>
<br>
<p>Presentase Buyer</p>
<div id="piechart1"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawSecondChart);
// Draw the chart and set the chart values
function drawSecondChart() {
var data = google.visualization.arrayToDataTable([
['Bulan', 'Jumlah Buyer'],
['April 2017 - Juni 2017', 114]
]);
// Optional; add a title and set the width and height of the chart
var options = {'title':'Periode April 2017 - Juni 2017', 'width':550, 'height':400};
// Display the chart inside the <div> element with id="piechart"
var chart = new google.visualization.PieChart(document.getElementById('piechart1'));
chart.draw(data, options);
}
</script>
</body>
</html>
如何制作视图或弹出窗口的功能，所以当我单击视图时，会出现表格和图表，我使用 Angularjs 制作函数，请帮助我，因为 idk 为什么会发生这种情况
你可以通过使用Angular JS材质设计库来做到这一点。 假设你有'ng-click="showPopup($event("'事件。所以你需要在JS中做：
$scope.showPopup= function(ev) {
$mdDialog.show({
controller: DialogController,
templateUrl: 'dialog.template.html',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose:true,
fullscreen: $scope.customFullscreen
})
.then(function(answer) {
$scope.status = 'You said the information was "' + answer + '".';
}, function() {
$scope.status = 'You cancelled the dialog.';
});
};
有关参考，请访问此
图书馆光盘：
对于 JS：
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.12/angular-material.min.js"></script>
对于 CSS：
<link rel="stylesheet"href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.12/angular-material.min.css">