javascript - ng-repeat ng-click 仅显示数组中的最后一个值

Question

我试图在弹出窗口中显示数据中每个值的详细信息，但是，仅显示数组中的最后一个值三次，而不是三个不同的值。

这是我的 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>

和 JavaScript 函数:

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

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

我的数据:

"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"
                }]
            }]
          }
       }

当我点击查看详细信息 ng-click="togglePopup(value) 时，它会显示弹出窗口，但仅显示来 self 的 json 中名为“详细信息”的子数组的最后一个值，因此它只会显示新装修的房子 和dcjkbc 对于所有房屋，因此它会显示三次。如果有任何帮助，我将不胜感激。

Answer 1

根据文档，最好的做法是在对象 ID 可用时进行跟踪:

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.

由于您有一个 id 值，因此您应该通过 value.id 进行跟踪:

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

这里是他们文档的链接: https://docs.angularjs.org/api/ng/directive/ngRepeat

就您的错误而言，您的代码工作完全正常。这是一个工作代码笔的链接:

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

您的问题出在此处未共享的其他代码中。