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（）函数应用于特定用户，这里是代码

 <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

你可以将$ scope的父控制器传递给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。

将ng-repeat值传递给Ionic Modal

2 个答案: