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 =＆＃34; togglePopup（value）它会显示弹出窗口，但只显示来自我的json的名为details的子数组的最后一个值，因此它只会显示Newly decorated house和{{ 1}}所有房屋都会显示三次。我将不胜感激任何帮助。

Answer 1

根据文档，最好在对象id可用时进行跟踪：

如果您正在处理具有唯一标识符属性的对象，则应使用此标识符而不是对象实例进行跟踪。如果您以后重新加载数据，ngRepeat将不必为已经呈现的项重建DOM元素，即使集合中的JavaScript对象已替换为新对象。对于大型集合，这可以显着提高渲染性能。如果您没有唯一标识符，则按$ index跟踪也可以提高性能。

由于你有一个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

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

Answer 2

尝试更改此行：

<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：

这是一个重写类型的答案。你可以更新弹出窗口，使其不在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>

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

2 个答案: