数据绑定不适用于嵌套ng-repeat

Question

When nesting ng-repeat it seems that clicking on the toggle button updates that addon in EVERY 'pair' (the first ng-repeat). Can anyone explain to me why this is the case and what I can do to fix it? Check the link above for the custom directive code...

<div ng-repeat="pair in pairs track by $index">
    <h3>Pair {{ $index + 1}}</h3>

    <div class='fieldrow'>
    <button ng-repeat="addon in addons track by $index" toggle-button="addon.added">{{addon.name}} (£{{addon.price}})</button>
    </div>
</div>

Answer 1

What is pair and what is addon, and how are they related. Right now, even though you have a nested ng-repeat, you have completely independent data structures, so addons array is same for each pair. Trott.

Based on this insight, I changed ng-repeat="addon in addons track by $index" to ng-repeat="addon in pair.addons track by $index"

Problem solved, thanks!

Answer 2

I think your code does not have any problem. see plunker here. this code is working well:

<div ng-repeat="pair in pairs track by $index">
    <h3>Pair {{ $index + 1}}</h3>

    <div class='fieldrow'>
    <button ng-repeat="addon in addons track by $index" toggle-button="addon.added">{{addon.name}} (£{{addon.price}})</button>
    </div>
</div>