Таким образом, у меня есть динамически сгенерированная таблица, в последней строке таблицы есть href с уникальным идентификатором каждого человека в базе данных, и он под гиперссылкой, чтобы я мог собрать идентификатор человека, перенести его на другую страницу и посмотреть подробности лица, связанного с конкретным идентификатором. admin_edit.php
указывает на admin_edit.php
, это страница, где гиперссылка направляет уникальный идентификатор. Теперь в текущем состоянии после нажатия на гиперссылку он физически перейдет на страницу. Но я хочу, чтобы страница отображалась в диалоговом окне jQuery. Теперь я делал такие вещи раньше, но с кнопками. По какой-то причине я не могу реализовать это в виде гиперссылок.
Мой код HTML/PHP/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 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="«" next-text="»"></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) {
dlg.load('admin/admin_edit.php');
e.preventDefault();
dlg.dialog('open');
});
});
Как получить гиперссылки для открытия в admin_edit.php
в диалоговом окне вместо перехода на физический URL?
Поскольку вы используете угловой, используйте ng-click
вместо использования jQuery onClick
. Затем вы можете передать data.id
функции в своей $scope
.
<a href ng-click="showDialog(data.id);" id="modifyLink">{{data.id}}</a>
Затем в вашем угловом контроллере создайте функцию showDialog
чтобы сделать то же самое, что делал ваш jQuery onClick
.
$scope.showDialog = function(id) {
var dlg=$('#modify').dialog({
title: 'Modify',
resizable: true,
autoOpen:false,
modal: true,
hide: 'fade',
width:600,
height:500
});
dlg.load('admin/admin_edit.php?id='+id);
dlg.dialog('open');
};
admin_edit.php
$scope.showDialog
в контроллер?
Вот пример
$(function() {
$("a").click(function(e) {
// Prevent default
e.preventDefault();
// Grab the url and do what you want with it
alert($(this).attr("href"));
// Grab the custom attribute
alert($(this).data("id"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a href="//raw.githubusercontent.com/xxxmatko/xDev.RequireJs/master/README.md" data-id="test" target="_blank">link</a>
<a>
идентификатор и вызываете это.load
ID.load
приclick
на страницу php, передавая что-то вродеdlg.load('admin/admin_edit.php?id='+id)