Это моя первая попытка использования Angular.Я пытаюсь загрузить таблицу из mysql и использую рейс php.
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conclave History</title>
<!-- Bootstrap Core CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Modal 1-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="memberModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="memberModalLabel">Details</h4>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</div>
<div class="dash">
</div>
</div>
</div>
</div>
<div class="container-fluid margin-top" ng-app="mySearch">
<div class="row justify-content-md-center" ng-controller="mySearchCtrl">
<div class="col-12">
<div class="row">
<div class="form-group"> <!--
<select class="p-1 m-2" ng-model="year" class="form-control" id="pass">
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
</select> -->
<label for="pass">Month:</label>
<select class="p-1 m-2" ng-model="mnth" class="form-control" id="pass">
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
<div class="text-right m-2">
<button class="btn btn-success" ng-click="searchByFilter()">View</button>
</div>
</div>
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Alias</th>
<th scope="col">Date</th>
<th scope="col">Acknowledgement Status</th>
<th></th>
</tr>
</thead>
<tbody>
<!-- {{table}} -->
<tr ng-repeat="t in table track by $index">
<th scope="row">{{$index+1}}</th>
<td>{{t.alias}}</td>
<td>{{t.date}}</td>
<td>{{t.ack_status ? t.ack_status:'NA'}}</td>
<td><a class="btn btn-outline-info" data-toggle="modal" data-target="#exampleModal" data-whatever={{t.no}}>View Request</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- scripts for angualar -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular-touch.js"></script>
<script>
var app = angular.module('mySearch', ['ui.bootstrap']);
app.controller('mySearchCtrl', function($scope,$http) {
$scope.mnth='';
$scope.table="";
$scope.value="";
$scope.reportState=true;
$scope.searchByFilter = function(){
alert(+$scope.mnth);
var dataObj={"value":$scope.mnth};
$http.post('./searchreport', dataObj)
.then(function(response) {
$scope.table=response.data;
$scope.reportState=false;
});
}
});
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
var modal = $(this);
var dataString = 'id=' + recipient;
$.ajax({
type: "GET",
url: "individual_feedback.php",
data: dataString,
cache: false,
success: function (data) {
console.log(data);
modal.find('.dash').html(data);
},
error: function(err) {
console.log(err);
}
});
})
</script>
</body>
</html>`
И код на index.php (рейс направлен) -
Flight::route('POST /searchreport', function(){
$db=new DB();
$req = Flight::request()->data->getData();
$arr = json_decode(json_encode($req), TRUE);
$res='';$sql='';
try{
$sql = "SELECT no,alias,date,ack_status FROM feedback WHERE MONTH(date)='".$arr['value']."'";
$q = $db->db->query($sql);
$res = $q->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($res);
} catch (Exception $e) {
$arr1 = array('status'=>'error');
echo json_encode($arr1);
}
});
На данный момент,я только пытаюсь отправить значение месяца из выпадающего списка и получить данные для этого из таблицы.
Ошибка не отображается, но таблица загружается с 5808 пустыми строками (только с индексом).
Могут ли некоторые помочь мне понять, почему в таблице не отображаются значения из результата запроса?
Заранее спасибо.