Question

我正在尝试解决为什么我的＆＃34;即将发生的事件＆＃34;列表没有显示？ Live demo here （代码如下所示）

以下是我的AngularJS观点：

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

这是我的控制器和自定义过滤器：

<script type="text/javascript" src="angularjs/angular.min.js"></script>
<script>

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

</script>

这是我的events.json Feed：

[
  {
    "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"
  }
]

我在Chrome控制台中收到错误，但不确定这意味着什么。

控制台错误：

TypeError: Cannot read property 'filter' of undefined
at http://ogmda.com/sandbox/listings.html:44:31
at fn (eval at <anonymous> (http://ogmda.com/sandbox/angularjs/angular.min.js:212:83), <anonymous>:2:191)
at Object.<anonymous> (http://ogmda.com/sandbox/angularjs/angular.min.js:117:376)
at n.$get.n.$digest (http://ogmda.com/sandbox/angularjs/angular.min.js:132:124)
at n.$get.n.$apply (http://ogmda.com/sandbox/angularjs/angular.min.js:135:269)
at http://ogmda.com/sandbox/angularjs/angular.min.js:19:437
at Object.e [as invoke] (http://ogmda.com/sandbox/angularjs/angular.min.js:39:156)
at d (http://ogmda.com/sandbox/angularjs/angular.min.js:19:358)
at Ac (http://ogmda.com/sandbox/angularjs/angular.min.js:20:151)
at Zd (http://ogmda.com/sandbox/angularjs/angular.min.js:18:464)

任何人对我如何进行修复都有任何建议？感谢。

Answer 1

错误表明input是undefined

upcomingEvents = input.filter(function (data) { //<-- error is here

在请求属性input

之前，请尝试检查filter的值

Answer 2

更改

 if ((data.start - currentDate) >= 0)

为：

if ((new Date(data.start) - currentDate) >= 0)

data.start只是日期的字符串表示。将其转换为Date第一

在中固定演示 Fiddle

TypeError：无法读取属性＆＃39; filter＆＃39;未定义的

似乎在您的代码中input值= undefined，因为在开始时您没有$scope.events和 input.filter(...)失败。

所以在你的过滤器中添加一些东西：

var upcomingEvents = [];

if(!input){
 return upcomingEvents;
}

或在控制器中发起$scope.events = []（最好的选择）

Answer 3

视图和控制器都可以。您需要更改过滤器。试试这个：

.filter('upcomingEvents', function() {
  return function(input) {
    var upcomingEvents = [];
    upcomingEvents = input.filter(function(data) {
      var currentMs = (new Date()).getTime();
      var compareMs = (new Date(data.start)).getTime();

      if ((compareMs - currentMs) >= 0) {
        return true;
      } else {
        return false;
      }
    });

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

    return upcomingEvents;
  };
});

AngularJS列表未显示 - 自定义过滤器问题？

3 个答案: