Angular.js 动态时间过滤器答案

【问题标题】：Angular.js dynamic time filterAngular.js 动态时间过滤器
【发布时间】：2014-03-29 11:55:34
【问题描述】：

我有一个名为 events 的 MySQL 表：

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 循环遍历此表，并尝试应用自己的过滤器，它应该按当前时间过滤事件。所以你可以猜到，使用这个过滤器应该只显示一个事件。您可以在下面看到我尝试过的操作。

这就是我选择事件并为 Angular 准备 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 的示例应用过滤器，但不幸的是这没有帮助。也许你有更好的想法如何做到这一点。

【问题讨论】：

有什么显示吗？有没有错误？ time_from 和 time_to 的数据类型是什么（字符串、日期、...）？你确定你的currentTime 函数被调用了吗？
没有显示，没有错误。 time_from 和 time_to 的数据类型是字符串。我完全确定，currentTime 被调用了。

标签： javascript mysql angularjs

【解决方案1】：

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

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

请参考代码里面的cmets

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

?>

希望对你有帮助

【讨论】：

顺便说一下，我使用 'GET' 方法从 javascript 检索 $http 调用中的数据，但 'POST' 可以正常工作。使用“GET”对我来说很方便，因为在这种情况下我们实际上是在获取数据而不是发布任何数据。
您好@LiGhT MaN，欢迎来到 Stack Overflow。在提供答案时，解释“为什么”的答案被认为是一种很好的形式，而不仅仅是“什么”或“如何”。例如，您可以通过解释代码中包含的解决方案的关键部分来改进此答案并帮助未来的读者。
@DavidPope 感谢您的提醒，我已经更新了答案，希望现在更清楚。我的错，这是我在这里的第一篇文章
我想你不明白我的问题。 MySQL 表中的所有事件都会显示出来。 <? 和 <?php 之间没有区别。我提醒我的问题是“如何应用动态时间过滤器”
@john_cave17 可能我误解了你的问题，你能否详细说明一下“动态时间”