Although I've made progress in learning angularjs with routes, views, and ui-bootstrap, I'm facing challenges when working with scope data and two-way binding. While using ng-repeat, I discovered the ability to bind the loop to a foreach in the controller for additional processing, which led me to try combining the two functionalities.
In my pursuit to understand scope in angularjs ng-repeat, I found myself dealing with a list of persons, each possessing a weekSchedule object used to create a table representing schedule information for a week.
The process involves looping through the list of persons (outer loop) and then iterating over an array numbered 1 - 7 (inner loop). The objective is to match up the 'day of the week' number from the schedule data with the day number and populate the schedule times accordingly, or leave it blank if there's no match. I need the weekSchedule data for each person to be within scope during the inner loop iteration for this to work effectively.
Despite reading various resources on this issue, I haven't been able to find a suitable solution. I've attempted numerous strategies including using rootScope, $parent, broadcast, setters & getters, setting the person first before executing the inner loop code via a function, among others.
At one point, I tried setting the weekScedule in scope with ng-init & ng-model within my table. Additionally, I experimented with a 'child scope ng-init with 'day.weekSchedule=person.weekSchedule'. Although these methods somewhat placed the object into scope in the View template, only the last object was displayed correctly. Consequently, the object in the first outer iteration had the wrong association.
<table width="100%" border="1">
<tr ng-repeat="person in scheduleData">
<th ng-init="setWeekSchedule(person.weekSchedule)">{{person.name}}</th>
<td width="12%" ng-repeat="day in dayNumbers">
<span ng-init="day.weekSchedule=person.weekSchedule"></span>
day.id: {{day.id}}<br />
1st schedule id: {{day.weekSchedule[0].id}}
</td>
</tr>
</table>
$scope.dayNumbers = [{id:1},{id:2},{id:3},{id:4},{id:5},{id:6},{id:7}];
$rootScope.person = {
weekSchedule: [{ id: 0 }]
};
$rootScope.setWeekSchedule = function(weekSchedule) {
$rootScope.person.weekSchedule = weekSchedule;
};
$scope.dayNumbers.forEach(function(day){
day.weekSchedule = $rootScope.person.weekSchedule;
console.log('day.id: ' + day.id);
console.log('1st schedule id: ' + day.weekSchedule[0].id);
});
$scope.scheduleData = [
{"id":"1","name":"Jim","weekSchedule":[
{"id":"1001","dow":"1","scheduleDate":"01/08/2016"},
{"id":"1002","dow":"2","scheduleDate":"01/09/2016"},
{"id":"1003","dow":"4","scheduleDate":"01/11/2016"},
{"id":"1004","dow":"5","scheduleDate":"01/12/2016"}]},
{"id":"1","name":"Kim","weekSchedule":[
{"id":"1005","dow":"2","scheduleDate":"01/09/2016"},
{"id":"1006","dow":"3","scheduleDate":"01/10/2016"},
{"id":"1007","dow":"5","scheduleDate":"01/12/2016"},
{"id":"1008","dow":"6","scheduleDate":"01/13/2016"}]}
];
https://i.sstatic.net/lgm4C.png
Regardless of how I configure the schedule in the controller, accessing it correctly in the View iterations remains an issue. And no matter how I set up the schedule in the View, processing it accurately in the Controller continues to pose a challenge.