Question

我有MySQL表名为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 |

我使用ng-repeat循环遍历此表，并且我尝试应用自己的过滤器，它应该按当前时间过滤事件。因此，您可以猜测，使用此过滤器时，只应显示一个事件。下面你可以看到我试图做的事情。

这就是我选择事件并为角度准备json的方法：

<?
    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);
?>

事件很好地显示没有错误。角度代码：

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
            }
    }

标记：

<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>

所以，我尝试使用时间格式"HH:mm:ss"在angularjs.org上使用$interval的示例应用过滤器，但不幸的是，这没有帮助。也许你有更好的想法如何做到这一点。

Answer 1

我在你提到的$interval示例中使用了“my-current-time”指令。

我很确定可能会有更好的解决方案，但这很有效。

请参阅代码中的注释

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);

}

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);

?>

希望这可以提供帮助

Angular.js动态时间过滤器

1 个答案: