javascript - apply controller data in view by days

Question

i am trying to create a week calendar with AngularJS, but i have troubles adding the events on the 7 boxes which are my days in the week i am viewing the calendar. I have this html layout

<div class="week">
    <ul></ul>
    <ul></ul>
    <ul></ul>
    <ul></ul>
    <ul></ul>
    <ul></ul>
    <ul></ul>
</div>

and in the controller i got this variable jsonEvents which has this datas so far in the test mode.

$scope.jsonEvents = [
        {"event_id":"1","event_name":"Basketball","event_startdate":"2","event_stopdate":"5"},
        {"event_id":"2","event_name":"Party","event_startdate":"3","event_stopdate":"3"}
    ];

What i want to do is, because the first event has data from 2 to 5, to add a <li>Basketball</li> in the 2nd, 3rd, 4th and 5th <ul>'s and because the second event starts 3 and ends in 3, to add a <li> into the 3rd <ul>. Do i need a directive to do that or something? Thank you in advance, Daniel!

Answer 1

This produces a list with just your items shown under the relevant days...

  <div ng-repeat="day in [1,2,3,4,5,6,7]">
        <div>Day {{day}}
            <ul><li ng-repeat="data in jsonEvents | filter:onDay(day)">{{data.event_name}}</span></li></ul>
        </div>
      </div>

And add this to your controller:

  $scope.onDay = function(day)  {

    return function(data) {
      return data.event_startdate <= day && data.event_stopdate >= day;
    }
  }

See http://plnkr.co/edit/GiNJy74YGyVtVfO5zxV0