ng-repeat ng-click showing only last value from an array

Question

I am trying to show the details of each of my values from my data in a pop up window however, only last value from an array is shown three times instead of three different values.

This is my html:

  <div ng-repeat="value in all | filter: (!!locationFilter || undefined) && {type: locationFilter} | filter: priceFilter | filter: datesFilter | orderBy:sortProp">
                  <ul>
                     <li><img src="app/images/{{value.image}}.jpg" alt="Smiley face" height="100" width="240"></li>
                     <li><strong>{{value.id}}</strong></li>
                     <li><strong>{{value.address}}</strong></li>
                     <li>city: {{value.city}}</li>
                     <li>postcode: {{value.postcode}}</li>
                     <li>price: £{{value.price}}</li>
                     <li>num_of_beds: {{value.num_of_beds}}</li>
                     <li>{{value.type}}</li>
                     <li>{{value.minutes}}</li>
                     <li>{{value.added}}</li>
                  </ul>
                     <div ng-click="togglePopup(value)">
                     view details
                        <div class="modal-outer" ng-if="showPopup">
                           <div class="modal-container">
                           {{selectedValue.address}}
                              <div ng-repeat="subValue in value.details track by $index">
                                 <ul>
                                    <li>{{subValue.desc}}</li>
                                    <li>{{subValue.info}}</li>
                                 </ul>
                              </div>
                           </div>
                        </div>
                     </div>
               </div>

and the javascript function:

$scope.showPopup = false;
        $scope.selectedValue = {};

        $scope.togglePopup = function(value) {
           $scope.showPopup = !$scope.showPopup;
           if (value) 
            $scope.selectedValue = value;   
        };

My data:

"allData": {

        "patientsData": {

            "patients": [{
                "id": 1,
                "image": "amsterdam",
                "address": "17 Peregrine House",
                "city": "London",
                "postcode": "SW11 2NL",
                "price": "150.000",
                "num_of_beds": 1,
                "type": "terraced",
                "minutes": 20,
                "added": "Jan 6 2017",
                "details": [{
                    "desc": "Beautiful terraced house looking like houses in Amsterdam",
                    "info": "dcjkbc"
                }]
            }, {
                "id": 2,
                "image": "dutch",
                "address": "22 Portland House",
                "city": "London",
                "postcode": "SW12 2SE",
                "price": "800.000",
                "num_of_beds": 3,
                "type": "detached",
                "minutes": 10,
                "added": "Dec 28 2016",
                "details": [{
                    "desc": "Dutch house in the countryside",
                    "info": "dcjkbc"
                }]
            }, {
                "id": 3,
                "image": "evy",
                "address": "2 Holland Road",
                "city": "London",
                "postcode": "SW10 2RE",
                "price": "950.000",
                "num_of_beds": 4,
                "type": "terraced",
                "minutes": 5,
                "added": "Jan 5 2017",
                "details": [{
                    "desc": "Newly decorated house",
                    "info": "dcjkbc"
                }]
            }]
          }
       }

when I click view details ng-click="togglePopup(value) it shows the popup but only displaying the last value from subarray called details from my json so it would only show Newly decorated house and dcjkbc for all houses so it would be displayed three times. I would appreciate any help.

Answer 1

According to the documentation it is better practice to track by an objects id when it is available anyway:

If you are working with objects that have a unique identifier property, you should track by this identifier instead of the object instance. Should you reload your data later, ngRepeat will not have to rebuild the DOM elements for items it has already rendered, even if the JavaScript objects in the collection have been substituted for new ones. For large collections, this significantly improves rendering performance. If you don't have a unique identifier, track by $index can also provide a performance boost.

Since you have an id value you should track by value.id instead:

<div ng-repeat="subValue in value.details track by value.id">

And here is a link to their documentation: https://docs.angularjs.org/api/ng/directive/ngRepeat

As far as your error, your code works totally fine. Here is a link to a working codepen:

http://codepen.io/egerrard/pen/egvOaX

Your problem is in some other code that isn't shared here.

Answer 2

Try changing this line:

<div ng-repeat="subValue in value.details track by $index">

to

<div ng-repeat="subValue in all[$index].details track by $index">

I suspect value is ending by being bound to the last element of your ng-repeat. This way you should be for sure be selecting the proper value element from your list.

Attempt 2:

This is a little more of a re-write type answer. Could you update the pop-up so that it is not inside the ng-repeat?

<div class="modal-outer" ng-if="showPopup">
    <div class="modal-container">
        {{selectedValue.address}}
        <div ng-repeat="subValue in value.details track by $index">
            <ul>
                <li>{{selectedValue.details.desc}}</li>
                <li>{{selectedValue.details.info}}</li>
            </ul>
        </div>
    </div>
</div>