ng-repeat ng-clickアレイの最後の値だけを表示する

Question

私のデータの各値の詳細をポップアップウィンドウに表示しようとしていますが、配列の最後の値のみが3つの異なる値。

これは私の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クリック= "togglePopupビューの詳細をクリックしたときに（値）それはポップアップを表示しますが、私のjsonからの詳細と呼ばれるサブアレイからの最後の値を表示するだけです。 Newly decorated houseとdcjkbcは3回表示されます。助けていただければ幸いです。

Answer 1

は、ドキュメントによれば、とにかくオブジェクトIDで追跡するために、より良い習慣です：

あなたはユニークな識別子プロパティを持つオブジェクトを使用している場合、あなたがすることによって追跡する必要がありますオブジェクトインスタンスの代わりにこの識別子。後でデータをリロードすると、ngRepeatは、コレクション内のJavaScriptオブジェクトが新しいものに置き換えられたとしても、すでにレンダリングされたアイテムのDOMエレメントを再構築する必要はありません。大規模なコレクションの場合、レンダリングのパフォーマンスが大幅に向上します。一意の識別子がない場合は、$ indexで追跡することでパフォーマンスが向上します。

あなたが代わりにvalue.idによって追跡しなければならないid値を持っているので：限り、あなたのエラーなど https://docs.angularjs.org/api/ng/directive/ngRepeat

、あなたのコードの作品：

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

そして、ここではそのドキュメントへのリンクですまあまあ。ここで働いてcodepenへのリンクです：

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

あなたの問題は、ここでは共有されていないいくつかの他のコードです。

Answer 2

は、この行を変更してみてください：

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

へ

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

を私はvalueがあなたのNGリピートの最後の要素にバインドされることによって終了されると思います。この方法で、リストから適切な値要素を選択することが確実になるはずです。

試み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>