將ng-repeat值傳遞給Ionic Modal

Question

對於一組用戶，我有一個ng-repeat，我希望能夠單擊每個用戶以在Ionic Modal中顯示其詳細的配置文件信息。

這裏的實際HTML：

<div ng-repeat='user in users track by $index' ng-click="openModal()"> 
    <div class="col"> 
    <div class="col profile-image" > 
     <img src="img/default_user.jpg" class="connect_image" /><br />{{user.name}}<br /> 
     <span class="connect_subject">{{user.about}}</span> 
    </div> 
</div> 
</div> 

這裏是一個示例模態是在模板中：

<script id="profile-modal.html" type="text/ng-template"> 
    <div class="modal"> 
     <ion-header-bar> 
     <h1 class="title">{{user.name}}</h1> 
     </ion-header-bar> 
    </div> 
</script> 

的問題是，我該如何傳遞ng-repeat用戶變量進入模式，所以我可以訪問user.name？

Answer 1

你只需要在OpenModal（）函數適用於particualr用戶，這裏是代碼

<div ng-repeat='user in users track by $index' > 
      <div class="col"> 
      <div class="col profile-image" ng-click="openModal(user)"> 
       <img src="img/default_user.jpg" class="connect_image" /> 
       <br />{{user.name}} 
       <br /> 
       <span class="connect_subject">{{user.about}}</span> 
      </div> 
     </div> 
    </div> 

而且在功能上，你可以申請範圍，

$scope.openModal = function(user) { 
      $scope.user = user; 
      $scope.modalCtrl.show(); 
     }; 

這裏是工作Codepen

Answer 2

您可以將父控制器的$作用域傳遞給modal控制器;

$ionicModal.fromTemplateUrl('my-modal.html', { 
    scope: $scope 
}); 

然後，您可以在模態控制器中使用父範圍的數據。我現在看到了。您想要將您在ngRepeat中的用戶數據傳遞給模態控制器。

在這種情況下，您的代碼應該是以下內容;

$ionicModal.fromTemplateUrl('modal.html', { 
    scope: $scope 
}).then(function(modal) { 
    $scope.modal = modal; 
}); 

$scope.openModal = function(data) { 
    $scope.selectedUser = data; 
    $scope.modal.show(); 
} 

然後，您可以在selectedUser中使用您選擇的用戶數據。你可以看一下that。