AngularJS data binding when using ng-repeat

Question

I apologize if this has an awkward question title. I need help understanding how to perform the proper data binding in a certain case. I have an object I call TimesheetData this object stores a string which is the week like 6/13/2016, it also has an array of weekData which stores objects that have an id and then hours worked on each day of the week.

I am using ng-repeat to populate a drop down select with the optional week of data, but I am lost on figuring out how to a table below this week selection with the value selected which is a date.

In the code below I need to somehow update the data in the <td> tags to correspond with the data stored in the object that has the weekOf that is equal to the selected one. I believe on solution would be to bind the data in the table from the array using the index of the selected item in the select tag.

Can anyone show me how to get that index.

dash.TimesheetData.WeekData[x].xyz where x is the value from the select tag and it's selected index.

Some code below for reference:

<h2>Week of {{dash.TimesheetData.WeekOf}}</h2>
            <p>
                Week
                <select style="color:black;" data-ng-model="dash.TimesheetData.WeekOf">
                    <option data-ng-repeat="options in dash.TimesheetData.WeekData" value="{{options.WeekOf}}">{{options.WeekOf}}</option>
                </select>
            </p>
            <div class="table-responsive">
                <div class="table-hover table-striped">
                    <style>
                        .table td {
                            text-align: center;
                        }

                        .table th {
                            text-align: center;
                        }
                    </style>
                    <table class="table">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Monday</th>
                                <th>Tuesday</th>
                                <th>Wednesday</th>
                                <th>Thursday</th>
                                <th>Friday</th>
                                <th>Saturday</th>
                                <th>Sunday</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>{{dash.TimesheetData.WeekData[0].ID}}</td>
                                <td>{{dash.TimesheetData.WeekData[0].Monday}}</td>
                                <td>{{dash.TimesheetData.WeekData[0].Tuesday}}</td>
                                <td>{{dash.TimesheetData.WeekData[0].Wednesday}}</td>
                                <td>{{dash.TimesheetData.WeekData[0].Thursday}}</td>
                                <td>{{dash.TimesheetData.WeekData[0].Friday}}</td>
                                <td>{{dash.TimesheetData.WeekData[0].Saturday}}</td>
                                <td>{{dash.TimesheetData.WeekData[0].Sunday}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

Timesheet object for reference:

function WeekObject(ID, Mon, Tue, Wed, Thur, Fri,Sat,Sun, WeekOf) {
    this.ID = ID;
    this.Monday = Mon;
    this.Tuesday = Tue;
    this.Wednesday = Wed;
    this.Thursday = Thur;
    this.Friday = Fri;
    this.Saturday = Sat;
    this.Sunday = Sun;
    this.WeekOf = WeekOf;
};

this.TimesheetData = {
    WeekOf: '',
    WeekData: [
        new WeekObject(1,7,4,4,4,1,0,0, '6/13/2016'),
        new WeekObject(2,5,6,2,8,1,2,0,'6/20/2016')
   ],
};

Answer 1

I would also recommend to see the ng-options directive to popolate the select HTML element. As you can see from the link, you can have your week bounded to the ng-model scope variable.

https://docs.angularjs.org/api/ng/directive/select