Question

我正在尝试创建一个包含表格的网页，用户必须能够点击已过滤的行或未过滤的行，并且会弹出一个模式，显示有关所选行的更多信息。

这是主要代码（包括表格）

<body ng-app="mainApp">
<h1>Issues Repository</h1>
<div class="container-1">
<span class="icon"><i class="fa fa-search"></i></span>
<input type="search" id="search" ng-model="searchBox" placeholder="Buscar..." />
</div>
<div>


</div>
<div id="divBuscador" ng-controller="issues">
    <table class="table table-striped" id="tableList"  cellspacing="0" border=1>

    <tr>
      <th>OpCo</th>
      <th>Tecnologia</th>
      <th>Version</th>
      <th>Titulo del Issue</th>
      <th>Estado</th>
    </tr>

        <tr class='clickable-row' data-target="#contentModal" style="cursor:pointer" id="issueList"  ng-repeat="document in documents | filter:searchBox" ng-click="openModal(documents)">
        <td id="opCo_Val">{{ document.opCo}}</td>
        <td id="tec_Val">{{ document.Tecnology }}</td>
  <td >{{ document.Version }}</td>
  <td >{{ document.Issue }}</td>
  <td >{{ document.Status }}</td>
        </tr>
  </table>

</div>

这是链接到点击的功能：

jQuery(document).ready(function($) {
            $(".clickable-row").click(function() {
                $('#contentModal').modal('show');
        });
        });

这是控制器：

app.controller('issues',  ['$scope', function($scope, $modal){
$scope.documents = fileX.records;

}]);

如何将变量传递给模态，例如{{document.Version}}或{{document.Issue}}

请解释一切，我是棱角分明的新人。

Answer 1

据我了解，您需要从点击的行中获取数据吗？

下面的代码可以帮到你。

 $('#example tr').click(function(){
          $(this).find("td").each(function(){
          alert($(this).html());
        });
    });

我在警告框中打印了值，效果很好。如果你想将每个值存储到数组中，只需使用以下代码行推送它：

    $scope.tableRowValues = [];
    $scope.tableRowValues.push($(this).html());

.each方法内部

希望这会对你有帮助！

Answer 2

我通过删除上面的jQuery并将其添加到控制器找到了这个问题的解决方案：

  $scope.openModal=function (index, ob)
  {
     $scope.id=index;
  $scope.selected_issue=ob;
  }

我也将ng-click和data-target设置为行：

<tr style="cursor:pointer" id="issueList" ng-repeat="issues in issue | filter:searchBox" ng-click="openModal($index, issues)" data-toggle="modal" data-target="#contentModal">

感谢所有帮助过的人！

从HTML表格行中获取值并将其传递给模式

2 个答案: