My objective is to display the details of each value from my data in a pop-up window. However, instead of showing three different values, the pop-up only displays the last value from an array three times.
This is the HTML code I am using:
<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>
Additionally, here is the JavaScript function:
$scope.showPopup = false;
$scope.selectedValue = {};
$scope.togglePopup = function(value) {
$scope.showPopup = !$scope.showPopup;
if (value)
$scope.selectedValue = value;
};
This is the data I am working with:
"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"
}]
}]
}
}
Upon clicking on "view details" with ng-click="togglePopup(value)," the popup only displays the last value from the subarray named "details" in my JSON, causing it to be repeated three times. Any guidance on how to resolve this issue would be greatly appreciated.