HTML

Question

我在HTML文件中有一个表。它来自JSON。

在其中一个单元格中，我想要包含一个应该打开模态窗口的链接。

它工作正常，但我想在这个模态窗口上显示有关包含链接的表行的信息。

这是代码的一部分：

<tbody>
    <tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
        <td>{{data.material_number}}</td>
        <td>{{data.material_name}}</td>
        <td>{{data.material_price}}

         <a href="#openModal">Open Modal</a>

            <div id="openModal" class="modalDialog">
                <div>
                    <a href="#close" title="Close" class="close">X</a>
                    <h2>{{data.material_name}}</h2>
                    <p>This is a sample modal box that can be created using the powers of CSS3.</p>
                    <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>

                </div>

            </div>

        </td>
        <td>{{data.currency_name}}</td>
        <td>{{data.material_price_date}}</td>
        <td>{{data.unit_name}}</td>
        <td>{{data.provider_name}}</td>
        <td>{{data.material_active}}</td>

        <td><a href="edit_material.php?id={{data.id_material}}" class="btn btn-info" role="button">Edit</a></td>
    </tr>
</tbody>

我的问题是，在模态窗口中显示的H2标记内，来自{{data.material_name}}的数据不是来自所选行的数据，而是来自表格第一行的数据。 / p>

欢迎任何帮助。

提前谢谢。

Answer 1

HTML代码：尝试使用ng-click并将行数据作为参数传递，如下所示

  <a ng-click="openModal(data)">Open Modal</a>

        <div id="openModal" ng-show="showModal" class="modalDialog">
            <div>
                <a href="#close" title="Close" class="close">X</a>
                <h2>{{modaldata.material_name}}</h2>
                <p>This is a sample modal box that can be created using the powers of CSS3.</p>
                <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>

            </div>

        </div>

控制器：

$scope.openModal = function(data){
  $scope.showModal = true;
  $scope.modaldata = data;
}