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

Question

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

这是我的 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) 时，它会显示弹出窗口，但只显示来自我的 json 的称为详细信息的子数组的最后一个值，因此它只会显示 Newly decorated house和 dcjkbc 所有房子，所以它会显示三次。如果有任何帮助，我将不胜感激。

Answer 1

尝试更改此行：

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

到

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

我怀疑 value 被绑定到 ng-repeat 的最后一个元素而结束。这样您就可以确保从列表中选择正确的值元素。

尝试 2：

这更像是一个 re-write 类型的答案。您能否更新 pop-up 使其不在 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>

Answer 2

根据文档，更好的做法是在可用时按对象 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">

这是他们文档的 link： https://docs.angularjs.org/api/ng/directive/ngRepeat

就您的错误而言，您的代码完全可以正常工作。这是工作代码笔的 link：

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

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

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

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

javascript

arrays

angularjs

ng-repeat

angularjs-ng-click