как сделать функцию всплывающего окна / просмотра из html с помощью angular - PullRequest
1 голос
/ 15 января 2020

У меня есть таблица с этим кодом на 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, пожалуйста, помогите мне, потому что я знаю, почему это происходит

1 Ответ

0 голосов
/ 16 января 2020

Вы можете сделать это, используя 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.';
        });   
   };

для ознакомительного посещения this

cdn библиотеки:

для 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">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...