Question

更新：清理了JSON，现在看来过滤器存在问题...

请参阅下面的原始讯息..

我是一个Javascript新手，所以我试图理解为什么我的应用程序无法运行。

我使用此应用程序的目标是显示来自驻留在同一服务器上的JSON源的两个即将发生的事件。。这是 my live demo 。

以下是我设置的方式：

我的观点：

<body ng-app="listApp">

<div class="container" ng-controller="EventController">

<h3>Upcoming events:</h3>

    <ul ng-repeat="event in events | upcomingEvents | limitTo: 2">
        <li>{{ event.title }}</li>
        <li>{{ event.start }}</li>
    </ul>

</div>

我的模块，控制器和过滤器：

var app = angular.module('listApp', []);

app.controller('EventController', function($scope, $http){
    $http.get('events.json').success(function(data) { 
            $scope.events = data;
    })
});

    app.filter('upcomingEvents', function () {
return function (input) {

    var upcomingEvents = [];

    upcomingEvents = input.filter(function (data) {
        var currentDate = new Date();

        if ((data.start - currentDate) >= 0) {
            return true;
        } else {
            return false;
        }
    });

    upcomingEvents.sort(function (a, b) {
        return a.start - b.start;
    });

    return upcomingEvents;
  };
});
</body>
</html>

来自JSON文件的示例事件：

[
  {
    "title": "All Day Event",
    "start": "2015-07-13",
    "allDay": true
  },
  {
    "title": "Long Event",
    "start": "2015-07-05",
    "end": "2015-07-13"
  },
  {
    "title": "Repeating Event",
    "start": "2015-07-15",
    "allDay": false
  },
  {
      "title": "first time",
      "start": "2015-07-31"
  }
]

如果我删除$ http服务并只是手动将JSON事件对象提供给控制器，它将正常工作。只是一旦我加入$ http服务，它就会适得其反。

任何人都有任何关于如何修复的线索？谢谢！

Answer 1

您所描述的“来自JSON文件的示例事件”是一种Javascript数据结构，但它不是有效的JSON。

有关JSON的完整定义，请参阅http://json.org/，但基本上您可以使用字符串和数字，而不是日期，并且键名必须用双引号括起来，字符串只能在它们周围使用双引号，不是单引号。

您可以随时在http://jsonlint.com/中输入JSON来验证您的JSON。

似乎无法获得$ http服务与AngularJS一起使用

1 个答案: