使用jQuery Dialog根据表格动态显示信息 - Use jQuery Dialog to dynamically show information based on a table

Use jQuery Dialog to dynamically show information based on a table

所以我有一个使用AngularJS的即时搜索表。在表的最右边，我有一个超链接格式的ID列，它将用户带到他们选择的链接上的特定页面，以便用户可以修改与唯一主键相关的数据。

现在我想使用jQuery在对话框中显示页面。我以前这样做过，但由于某种原因，在我想要应用它的格式中它不起作用。

我的PHP/AngularJS/HTML代码

    <div>
       <table>
           <tbody>                 
            <tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
                <td>{{data.first_name}} {{data.last_name}}</td>
                <td>{{data.team_name}}</td>
                <td>{{data.role}}</td>
                <td>{{data.phone}}</td>
                <td>{{data.to_date}}</td>
                <td>{{data.email}}</td>
                <td><a id="modifyLink" href="admin/admin_edit.php?id={{data.id}}">{{data.id}}</a></td>   
            </tr>
            </tbody>
        </table>        
    </div>
    <div class="col-md-12" ng-show="filteredItems == 0">
        <div class="col-md-12">
            <h4>No data found</h4>
        </div>
    </div>
    <div class="col-md-12" ng-show="filteredItems > 0">    
        <div pagination="" page="currentPage" on-select-page="setPage(page)" boundary-links="true" total-items="filteredItems" items-per-page="entryLimit" class="pagination-small" previous-text="&laquo;" next-text="&raquo;"></div>
    </div>
</div>
<div id="modify" class="divider"></div>

我的AngularJS代码:

$(document).ready(function() { 
         var dlg=$('#modify').dialog({
           title: 'Modify',
           resizable: true,
           autoOpen:false,
           modal: true,
           hide: 'fade',
           width:600,
           height:500
         });

         $('#modifyLink').click(function(e) {
           dlg.load('admin/admin_edit.php');
           e.preventDefault();
           dlg.dialog('open');
        }); 
});

我希望这个页面弹出一个对话框，并在同一个对话框中显示admin_edit。php的所有内容，我错过了什么?我该如何做到这一点?

几件事:

不要为链接使用id(因为您将有许多链接，并且它们都共享相同的id是不健康的)，使用class代替。

另外，e.preventDefault();必须是单击处理程序上的第一个语句，因为它将阻止导航到不同的页面(您希望留在当前页面并显示对话框)。

HTML/AngularJS

<div>
       <table>
           <tbody>                 
            <tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
                <td>{{data.first_name}} {{data.last_name}}</td>
                <td>{{data.team_name}}</td>
                <td>{{data.role}}</td>
                <td>{{data.phone}}</td>
                <td>{{data.to_date}}</td>
                <td>{{data.email}}</td>
                <td><a class="modifyLink" href="admin/admin_edit.php?id={{data.id}}">{{data.id}}</a></td>   
            </tr>
            </tbody>
        </table>        
    </div>
    <div class="col-md-12" ng-show="filteredItems == 0">
        <div class="col-md-12">
            <h4>No data found</h4>
        </div>
    </div>
    <div class="col-md-12" ng-show="filteredItems > 0">    
        <div pagination="" page="currentPage" on-select-page="setPage(page)" boundary-links="true" total-items="filteredItems" items-per-page="entryLimit" class="pagination-small" previous-text="&laquo;" next-text="&raquo;"></div>
    </div>
</div>
<div id="modify" class="divider"></div>

jQuery代码

$(document).ready(function() { 
         var dlg=$('#modify').dialog({
           title: 'Modify',
           resizable: true,
           autoOpen:false,
           modal: true,
           hide: 'fade',
           width:600,
           height:500
         });

         $('.modifyLink').click(function(e) {
           e.preventDefault();
           dlg.load(this.href).dialog('open');
        }); 
});