異なるデータでネストされたng-repeat

Question

私のWebアプリケーションでAngularJS v1.5.0を使用しています。 ng-repeatを使って表示されるユーザーのフィードバックがあります。ここでエグゼクティブがフィードバックをクリックするたびに、サーバーコールを行い、ユーザーの履歴を取得してパネルに表示します。

呼び出しが成功すると、コントローラのスコープ変数である変数feebackDetailsにデータを割り当てます。しかし、私はそれぞれのフィードバックは異なるユーザーと異なるデータを持っているので、コントローラのスコープを持つことを望んでいません。

<div class="tab-pane fade in" ng-controller="controller-feedback" id="feedback"> 
    <div class="col-md-12"> 
     <div class="row"> 
      <div ng-repeat="feedback in feedbacks track by $index" ng-click="getUserHistory(feedback.userId)" data-toggle="collapse" data-target="#feedback{{$index}}" aria-expanded="false" aria-controls="#feedback{{$index}}"> 
       <div class="alert alert-info"> 
        <div>{{feedback.feedback}}</div> 
        <div class="collapse" id="feedback{{$index}}"> 
         <div class="well"> 
          <div ng-repeat="feedbackDetail in feedbackDetails track by $index"> 
           <span style="font-weight: bold">Question:</span> {{feedbackDetail.question}} <br> 
           <span style="font-weight: bold">Answer:</span> {{feedbackDetail.answer}} <br> 
           <span style="font-weight: bold">Helpful:</span> {{feedbackDetail.helpful}} <br> 
           <span style="font-weight: bold">Feedback:</span> {{feedbackDetail.feedback}} <br> 
           <span style="font-weight: bold">Executive:</span> {{feedbackDetail.executive}} <br> 
           <hr ng-hide="$last"> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

これは私のコントローラの部分です。

app.controller('controller-feedback', function ($scope, $http, $rootScope) { 
    $scope.feedbacks = []; 
    $scope.feedbackDetails = []; 

    // This will get the feedbacks 
    $http 
     .get(phpUrl + 'test-feedback', {params:{doctorId:doctorId}}) 
     .then(function success(response) { 
      $scope.feedbacks = response.data.data; 
      $rootScope.feedbackCount = response.data.data.length.toString(); 
     }, function error(success) { 

     }); 

    $scope.getUserHistory = function(userId) { 
     console.log(userId); 

     $http 
      .get(phpUrl + 'test-feedback-details', {params:{userId:userId}}) 
      .then(function success(response) { 

       /** 
       * This variable $scope.feedbackDetails must be different for each ng-repeat 
       */ 
       $scope.feedbackDetails = response.data; 
      }, function error(success) { 

      }); 
    }; 
}); 

Answer 1

変更getUserHistoryを受け入れるfeedbackオブジェクトです。

$scope.getUserHistory = function(feedback) { 
var userId = feedback. userId .... 

というより

$scope.feedbackDetails = response.data; 

$scope.feedback.feedbackDetails = response.data; 

インナーNG-repeatがfeedback.feedbackDetailsを使用する必要があります割り当てます。

Answer 2

あなたはディレクティブを作成できますが、分離株スコープを使用して、あなたがng-repeatからあなたfeedbackDetailに通過するあなたのng-repeatの内側に置くことfeedbackDetailと呼ばれます。 次に、ディレクティブコントローラからHTTPリクエストを作成し、それを$scopeに割り当てると、リピートのその部分のスコープになります。