javascript - AngularJS list not showing - issue with custom filter? -
i trying troubleshoot why "upcoming events" list not show? live demo here (code shown below)
here's angularjs view:
<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>
here's controller , custom filter:
<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>
here's 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" } ]
i getting error in chrome's console, not sure means.
console error:
typeerror: cannot read property 'filter' of undefined @ http://ogmda.com/sandbox/listings.html:44:31 @ fn (eval @ <anonymous> (http://ogmda.com/sandbox/angularjs/angular.min.js:212:83), <anonymous>:2:191) @ object.<anonymous> (http://ogmda.com/sandbox/angularjs/angular.min.js:117:376) @ n.$get.n.$digest (http://ogmda.com/sandbox/angularjs/angular.min.js:132:124) @ n.$get.n.$apply (http://ogmda.com/sandbox/angularjs/angular.min.js:135:269) @ http://ogmda.com/sandbox/angularjs/angular.min.js:19:437 @ object.e [as invoke] (http://ogmda.com/sandbox/angularjs/angular.min.js:39:156) @ d (http://ogmda.com/sandbox/angularjs/angular.min.js:19:358) @ ac (http://ogmda.com/sandbox/angularjs/angular.min.js:20:151) @ zd (http://ogmda.com/sandbox/angularjs/angular.min.js:18:464)
anyone have advice on how can proceed fix? thanks.
change
if ((data.start - currentdate) >= 0)
to:
if ((new date(data.start) - currentdate) >= 0)
the data.start
string representation of date. convert date
1st
fixed demo in fiddle
typeerror: cannot read property 'filter' of undefined
seems in code input
value = undefined
because on start don't have $scope.events
, input.filter(...)
fails.
so add in filter:
var upcomingevents = []; if(!input){ return upcomingevents; }
or initiate $scope.events = []
in controller (best bet)
Comments
Post a Comment