Iterating over ng-repeat with inline array updates all objects in array

Question

in AngularJs I have two arrays: One with weeks and one with occupancy-numbers. Now at first I'm iterating over the week-array in a table:

<tr ng-repeat="week in weeks">
<!-- content for every week with occupancy-array -->
</tr>

In this table I have implemented a second ng-repeat for the occupancy-array, with the following structure per week:

Array[WeekId] = {early: null, late: null, night: null}

So for 3 weeks, the object exists 3 times.

The objects should be manipulatable for every week with an input-field. So my HTML is:

<tr ng-repeat="week in weeks">
    <td ng-repeat="(title, value) in occupancies[week.id]">
        <input class="form-control" ng-model="value"/>
    </td>
</tr>

But in this case, I have a problem by reaching the new values, because the array won't be changed in scope.

So then I decided to change my 2nd ng-repeat to this:

<td><input class="form-control" ng-model="occupancies[week.id].early"/></td>
<td><input class="form-control" ng-model="occupancies[week.id].late"/></td>
<td><input class="form-control" ng-model="occupancies[week.id].night"/></td>

Now, the scope will be changed, but with the problem, that the objects in my occupancy-array are mirrored. That means by changing occupancy-early in week 1 will change occupancy-early in the other weeks too.

I need help!

Answer 1

I think you can try assign object to occupancies and try again.

$scope.occupancies = {};