NG-반복 : 이전 패널에서 정보의 변경 방지

Question

그래서이 문제는 다음과 같습니다

<div class="container-fluid" ng-click="goto(item.title)" ng-repeat="item in someResponse" data-toggle="collapse" data-parent="accordion" 
data-target="#collapseone_{{ $index }}" aria-expanded="false" aria-controls="#collapseone"> 
<div class="panel-group" id="accordion"> 
    <div class="panel panel-info"> 
     <div class="panel-heading"> 
      <div class="wrap"> 
       <img class="img" ng-src="{{item.img_url}}"> 
       <p>{{item.title}}</p> 
       <p>{{item.price | currency}}</p> 
       <p>{{item.summary}}</p> 
      </div> 
     </div> 
     <div id="collapseone_{{ $index }}" class="panel-collapse collapse" ng-model="collapsePanel"> 
      <div class="panel-body"> 
       <div> 
        <p>{{IdResponse.price | currency}}</p> 
        <p>{{IdResponse.title}}</p> 

        <img class="img" ng-src="{{IdResponse.img_url}}"> 

        <p>{{IdResponse.summary}}</p> 

        <p>Bathrooms:{{IdResponse.bathroom_number}}</p> 
        <p>Bedrooms:{{IdResponse.bedroom_number}}</p> 

        <input type="button" value="favourites" ng-click="goto1()"> 
       </div> 
      </div> 
     </div> 

    </div> 
</div> 

와 컨트롤러 :

I는 HTML 여기에 구조를 가지고

angular 
.module('PropertyCross') 
.controller('searchResultsCtrl', ['$scope', '$http', '$location', 'myService', 
    function ($scope, $http, $location, myService) { 


     $scope.someResponse = myService.getData(); 
     console.log($scope.someResponse); 


     $scope.goto = function (id) { 
      myService.setID(id); 
      console.log(id); 
      $scope.IdResponse = myService.getID(); 
      console.log($scope.IdResponse); 
     }; 
     $scope.goto1 = function() { 
      myService.setFav($scope.IdResponse); 
     } 

    } 
]); 

하나의 축소 패널을 클릭하면 뒤에서 올바른 데이터가 표시되지만 시도 할 때 문제가 나타납니다. 두 개 이상의 패널을 엽니 다. 결과적으로 저는 열린 패널 모두에서 같은 것을했습니다.

이전 패널에서 정보를 변경하지 못하게하려면 어떻게해야합니까?

Answer 1

someResponse 모델로 데이터를 다시 푸시 할 수 있습니다. 그렇게하면 모든 가격 및 세부 정보가 일반 목록을 확장합니다. 당신의 ng-repeat 내에서 살아 있기 때문에 양방향 바인딩은 정보를 렌더링 할 것입니다.

이 코드를 다음과 같이 변경하십시오. 아래 ID가 데이터베이스의 고유 ID이거나 응답의 일부인 배열 내의 ID인지 확실하지 않습니다. 두 코드가 모두있는 경우이 코드를 사용할 수 있습니다 ...

$scope.goto = function (id, arrayIndex) { 
     myService.setID(id); 
     console.log(id); 
     $scope.someResponse[arrayIndex].IdResponse = myService.getID(); 
     console.log($scope.someResponse[arrayIndex].IdResponse); 
    }; 

따라서 정보를 원래 모델의 개체에 저장하고 있습니다. 모든 것을 하나의 데이터 모델에 저장하는 것이 었습니다. 따라서 업데이트 할 때마다 양방향 바인딩이 두 참조 (두 확장 된 패널 모두)에 업데이트되고 계단식으로 연결됩니다.

<div class="container-fluid" 
    ng-click="goto(item.title, index)" 
    ng-repeat="(index, item) in someResponse" 
    data-toggle="collapse" data-parent="accordion" 
    data-target="#collapseone_{{ $index }}" 
    aria-expanded="false" aria-controls="#collapseone"> 

을 마지막으로 이런 일을 패널에 중괄호를 업데이트 :

다음, 당신이 당신의 NG 반복하고 업데이트 할이에 NG를 클릭

<div id="collapseone_{{ $index }}" 
    class="panel-collapse collapse" ng-model="collapsePanel"> 
     <div class="panel-body"> 
      <div ng-show="item.IdResponse"> 
       <p>{{item.IdResponse.price | currency}}</p> 
       <p>{{item.IdResponse.title}}</p> 

       <img class="img" ng-src="{{item.IdResponse.img_url}}"> 

       <p>{{item.IdResponse.summary}}</p> 

       <p>Bathrooms:{{item.IdResponse.bathroom_number}}</p> 
       <p>Bedrooms:{{item.IdResponse.bedroom_number}}</p> 

       <input type="button" value="favourites" ng-click="goto1()"> 
      </div> 
     </div> 
    </div> 

그리고 ng-show="item.IdResponse"을 추가하여 서버에서 반환 된 개체가있을 때까지 서식이 표시되지 않습니다.

이 질문에 대한 답변을 보내주십시오.