In my database, I have a table named events:
id| event | start_time | end_time |
1 | wake up | 10:00:00 | 10:15:00 |
2 | play | 11:00:00 | 12:00:00 |
3 | walk | 14:00:00 | 14:30:00 |
I am using ng-repeat to loop through this table and attempting to create a custom filter to display only events that are currently happening based on their time. Ideally, only one event should be displayed at any given moment. Below is my attempt:
This is how I fetch the events data from MySQL and prepare it as JSON for AngularJS:
<?
mysql_connect("localhost","root","");
mysql_select_db('organaizer');
$sql = mysql_query('SELECT * FROM events');
while($event = mysql_fetch_array($sql))
{
$rows[] = $event;
}
print json_encode($rows);
?>
The events are retrieved successfully without any errors. AngularJS code:
function eventsCtrl($scope, $http)
{
$http({method: 'POST', url: 'events.php'}).success(function(data)
{
$scope.events = data; // response data
});
$scope.currentTime = function(event)
{
//Filter by current time
}
}
The HTML markup:
<div class='well' style='margin:10px;' ng-app ng-controller="eventsCtrl">
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th>#</th>
<th>Event</th>
<th>Start Time</th>
<th>End Time</th>
</tr>
<tr ng-repeat="event in events | filter:currentTime">
<td>{{event.id}}</td>
<td>{{event.event}}</td>
<td>{{event.start_time}}</td>
<td>{{event.end_time}}</td>
</tr>
</table>
</div>
I attempted to use a filter similar to the example provided on angularjs.org using the time format "HH:mm:ss" but was not successful. Any alternative ideas or solutions would be greatly appreciated.