0

Hi I have a requirement where I am to take weekly availability from the user, where user can input multiple time slots during the day, so for example a user can enter : Sunday available start-time as 7AM & end-time 9AM, start-time 2PM & end-time 4PM and do this for all the days for a given week

So I wrote an object for the same :

$scope.weeklyAvailability = {
                sunday : {
                    "startTime" : [],
                    "endTime" : []
                },
                monday : {
                    "startTime" : [],
                    "endTime" : []
                },
                tuesday : {
                    "startTime" : [],
                    "endTime" : []
                },
                wednesday : {
                    "startTime" : [],
                    "endTime" : []
                },
                thursday : {
                    "startTime" : [],
                    "endTime" : []
                },
                friday : {
                    "startTime" : [],
                    "endTime" : []
                },
                saturday : {
                    "startTime" : [],
                    "endTime" : []
                },
                week : ""
            };

I have created a working sample here : http://plnkr.co/edit/ZHE5wn1y35JYstbllVQt?p=preview For simplicity I have just included timeslot for Sunday in the index.html also haven't put in the form submit code.

What I am trying to do is when a user selects a time-slot it will be added to the array under startTime or endTime and that will also be displayed in the list element 

<li ng-repeat="availability in weeklyAvailability">
          {{availability}}
          <!--{{availability.sunday.startTime}}-->
          {{availability["sunday"]["endTime"]}} {{availability["sunday"]["endTime"]["0"]}}
        </li>

However I am not able to just display startTime and endTime (availability object does get displayed how can i access internal objects and arrays ? )

Also any comments on this design for taking in availability from the user?

TJ_
  • 255
  • 3
  • 12

1 Answers1

0

You can use:

<li ng-repeat="(key, value) in weeklyAvailability">
          {{value.endTime[0]}}
        </li>

Link: http://plnkr.co/edit/bNxaDfgnn8z9DuQCC9hi?p=preview

You can see here also: How can I iterate over the keys, value in ng-repeat in angular

Community
  • 1
  • 1
Tai Huynh
  • 599
  • 3
  • 8