Angular.js dynamic time filter

Question

I have MySQL table called events:

id|  descr  |  time_from |  time_to |
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 loop throught this table using ng-repeat and I've try to apply own filter, that should filter events by current time. So as you can guess, with this filter only one event should be displayed. Below you can see, what I have tried to do.

This is how I select events and prepare json for angular:

<?
    mysql_connect("localhost","root","");
    mysql_select_db('organaizer');
    $sql = mysql_query('SELECT * FROM events');
    while($lesson = mysql_fetch_array($sql))
        {
            $rows[] = $lesson;
        }
    print json_encode($rows);
?>

Events shows up well with no errors. Angular code:

function eventsCtrl($scope, $http)
    {
        $http({method: 'POST', url: 'events.php'}).success(function(data)
            {
                $scope.events = data; // response data 
            });
        $scope.currentTime = function(lesson)
            {
                //Filter by current time
            }
    }

The 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 at</th>
        <th>End at</th>
    </tr>
    <tr ng-repeat="event in events | filter:currentTime">
        <td>{{event.id}}</td>
        <td>{{event.descr}}</td>
        <td>{{event.time_from}}</td>
        <td>{{event.time_to}}</td>
    </tr>
  </table>
</div>

So, I've tried to apply filter using the example of $interval on angularjs.org using time format "HH:mm:ss", but unfortunately this doesn't help. Maybe you have better ideas how to do this.

Does anything show up? Are there any errors? What is the data type of time_from and time_to (Strings, Dates,...)? Are you sure your currentTime function gets called? — Michael Rose
– Michael Rose, Commented Mar 29, 2014 at 12:01
Nothing show up, no errors. Data type for time_from and time_to is string. And I'm completly sure, that currentTime being called. — eko24ive
– eko24ive, Commented Mar 29, 2014 at 12:36

Salam · Accepted Answer · 2014-03-30 18:26:25Z

1

I have used the "my-current-time" directive in the example you've mentioned $interval.

I'm pretty sure that there might be a better solution, but this works.

Please refer to the comments inside the code

HTML:

<body ng-app="Ang" ng-cloak>
    <div class='well' style='margin:10px;' ng-controller="eventsCtrl">
        <input type="text" my-current-time="format">
        <div class="table-responsive">
            <table class="table table-bordered">
                <tr>
                    <th>#</th>
                    <th>Event</th>
                    <th>Start at</th>
                    <th>End at</th>
                </tr>
                <tr ng-repeat="event in events | filter:currentTime"> <!-- here we're filtering using time_from as 10:00:00 -->
                    <td>{{event.id}}</td>
                    <td>{{event.descr}}</td>
                    <td>{{event.time_from}}</td>
                    <td>{{event.time_to}}</td>
                </tr>
            </table>
        </div>
    </div>
</body>

Javascript

var app = angular.module('Ang', [])
        .controller('eventsCtrl', eventsCtrl)
        .directive('myCurrentTime', function($interval, dateFilter) {
            // return the directive link function. (compile function not needed)
            return function(scope, element, attrs) {
                var format,  // date format
                    stopTime; // so that we can cancel the time updates

                // used to update the UI
                function updateTime() {
                    element.val(dateFilter(new Date(), format));
                    scope.time = element.val();
                }

                // watch the expression, and update the UI on change.
                scope.$watch(attrs.myCurrentTime, function(value) {
                    format = value;
                    updateTime();
                });

                stopTime = $interval(updateTime, 1000);

                // listen on DOM destroy (removal) event, and cancel the next UI update
                // to prevent updating time ofter the DOM element was removed.
                element.bind('$destroy', function() {
                    $interval.cancel(stopTime);
                });
            }
        });

function eventsCtrl($scope, $http, dateFilter)
{
    $http({method: 'GET', url: 'events.php'}).success(
        function(data)
        {
            $scope.events = data; // response data
        }
    );
    $scope.currentTime = function(lesson)
    {
        return ($scope.time >= lesson.time_from && $scope.time <= lesson.time_to)
    };

    $scope.format = 'h:mm:ss';
    $scope.time = dateFilter(new Date(), $scope.format);

}

And the PHP:

<?php

    mysql_connect("localhost","root","");
    mysql_select_db('organaizer');
    $sql = mysql_query('SELECT * FROM events');

    while($lesson = mysql_fetch_object($sql)) // Using mysql_fetch_object() function here is better when trying to convert it to JSON ( without adding extra key:value pairs to the data as in mysql_fetch_array() function)
    {
        $rows[] = $lesson;
    }
    echo json_encode($rows);

?>

Hope this could help

edited Mar 30, 2014 at 18:26

answered Mar 29, 2014 at 19:05

Salam

263 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Salam Over a year ago

By the way I used 'GET' method to retrieve the data in $http call from javascript, but 'POST' would work fine. It's just convenient for me to use 'GET' since we are actually getting data and not posting any in this case.

David Pope Over a year ago

Hello @LiGhT MaN, welcome to Stack Overflow. When providing an answer, it's considered good form to explain the "why" for your answer and not just the "what" or "how". For example, you could improve this answer and help out future readers by explaining the key piece of the solution contained in your code.

Salam Over a year ago

@DavidPope thanks for the heads up, I've update the answer and hope it's more clear now. My bad, that's my first post here

eko24ive Over a year ago

I think you don't understand my question. All events from MySQL table shows up. And there is no difference between <? and <?php. I remind that my question was "how apply filter with dynamic time"

Salam Over a year ago

@john_cave17 Probably I misunderstood your question, could you elaborate more about "dynamic time"

|

Collectives™ on Stack Overflow

Angular.js dynamic time filter

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related