使用 Angular 将一行数据从表传递到模态

Question

我有一个表格，显示比赛的条目（从带有PHP的数据库中提取并转换为.json对象以与AngularJS和JavaScript一起使用）。我还想在其上实现一个模式，因此当"法官"单击每个条目时，他们可以看到该条目的详细信息。所以基本上，我需要将一行数据传递给该模态（ui.bootstrap 模态）。

下面是包含所有数据的表的标记。模态应用于 ng 重复：

<table class="submissions">
<tr class="tb-header">
<td>id</td>
<td>wa #</td>
<td>name</td>
<td>email</td>
<td>file</td>
<td>rating</td>
<td>submitted on</td></tr>
    <tr ng-click="open()" ng-repeat="row in rows track by $index">
        <td>{{ row.id }}</td>
        <td class="wa-num">{{ row.wa_num }}</td>
        <td>{{ row.name }}</td>
        <td>{{ row.email }}</td>
        <td id="submitted-file">{{ row.file }}</td>
        <td>{{ row.rating }}</td>
        <td>{{ row.submitted }}</td>
    </tr>

</table>

这是控制整个页面和模态的控制器：

.controller('dashboard',['$scope', '$rootScope', '$location', '$modal', 'loginService', 'getEntries',
          function($scope, $rootScope, $location, $modal, loginService, getEntries){
          $scope.open = function () {
              var modalInstance = $modal.open({
                  templateUrl: '/partials/submission_mod.html',
                  controller: ['$scope', '$modalInstance', function($scope, $modalInstance){
                      $scope.modalInstance = $modalInstance;
                      $scope.cats = "Submission info goes here.";
                  }]
              });
          };
          var entries = getEntries.entries();
              entries.save(
                  function(result){
                      console.log(result);
                      //$scope.rows = [];
                      $scope.rows = result.entries;
                      console.log($scope.rows);

                  },
                  function(result) {
                      console.log(result);
                  }
              );
    }])

这是模态的标记（由于某种原因，目前没有拉入任何东西，甚至没有硬编码的"猫"）：

<div class="modal-entry">{{ cats }}</div>
<button class="btn btn-primary btn-modal" ng-click="modalInstance.close()">Close</button>

问题是：如何将数据传递给该模态？如何定位它，使其只拉出点击的行等？

任何指导都非常感谢。

Answer 1

plinkr 从 Angular Bootstrap Directives 文档中提供了一些有关如何执行此操作的信息

像这样有决心的事情：

var modalInstance = $modal.open({
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  size: size,
  resolve: {
    items: function () {
      return $scope.items;
    }
  }
});

Answer 2

最好的方法是将行作为参数传递给模态函数。

<tr ng-click="open(row)" ng-repeat="row in rows track by $index">
  ...
</tr>

在您的功能中，接收行：

$scope.openModal = function (row) {
    var modalInstance = $modal.open({
        templateUrl: '/partials/submission_mod.html',
        controller: 'ModalCtrl',
        resolve: {
            cat: function () {
                return row;
            }
        }
    });
};

然后传递给控制器：

.controller('ModalCtrl', function ($scope, $modalInstance, cat) {
    $scope.cat = cat;
});