如何单击表行中的图标并重定向到新的“详细信息页”;在angularjs
how to click an icon in table row and redirect to a new "details page" in angularjs?
我有一个多列和行表，我想点击图标在表行，并被重定向到一个新的视图与那个人的详细信息，我已经尝试了不同的方式，但我没有运气。"公共功能获取数据"是我的功能，我正在工作。下面是我的代码:
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>Transport View</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="banner" style="text-align:center; margin-left:auto; margin-right:auto; display:block;">
<img src="http://intranet.gfhs.local/stlc_trans/STLC-Tree-Logo-PACE.png">
</div>
<br> <form class="form-inline">
<div class="form-group">
<label >Search</label>
<input type="text" ng-model="search" class="form-control" placeholder="Search">
</div>
</form>
<div ng-controller="decontroller">
<br><table class="table table-hover table-striped table-bordered">
<thead>
<tr>
<tr><td></td><td></td><th style="text-align:center;" colspan="5"><h4>Attendance</h4></th><td></td><th style="text-align:center;" colspan="7"><h4>PCS Hours</h4></th></tr>
<tr>
<td ng-click="sort('ParticipantName')"><b>Participant Name</b>
<span class="glyphicon sort-icon" ng-show="sortKey=='ParticipantName'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></td>
<td ng-click="sort('Function')"><b>Function</b>
<span class="glyphicon sort-icon" ng-show="sortKey=='Function'" ng-class="
{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</td>
<td ng-click="sort('attendance_mo')"><b>Mon</b>
<span class="glyphicon sort-icon" ng-show="sortKey=='attendance_mo'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</td>
<td ng-click="sort('attendance_tu')"><b>Tue</b>
<span class="glyphicon sort-icon" ng-show="sortKey=='attendance_tu'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></td>
<td ng-click="sort('attendance_we')"><b>Wed</b>
<span class="glyphicon sort-icon" ng-show="sortKey=='attendance_we'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></td>
<td ng-click="sort('attendance_th')"><b>Thu</b>
<span class="glyphicon sort-icon" ng-show="sortKey=='attendance_th'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></td>
<td ng-click="sort('attendance_fr')"><b>Fr</b>
<span class="glyphicon sort-icon" ng-show="sortKey=='attendance_fr'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></td>
<td ng-click="sort('Lanyard_Status')"><b>Lanyard Status</b>
<span class="glyphicon sort-icon" ng-show="sortKey=='Lanyard_Status'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></td>
<td ng-click="sort('PCS Monday Hours')"><b>PCS Mon</b>
<span class="glyphicon sort-icon" ng-show="sortKey=='PCS Monday Hours'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></td>
<td ng-click="sort('PCS Tuesday Hours')"><b>PCS Tue</b>
<span class="glyphicon sort-icon" ng-show="sortKey=='PCS Tuesday Hours'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></td>
<td ng-click="sort('PCS Wednesday Hours')"><b>PCS Wed</b>
<span class="glyphicon sort-icon" ng-show="sortKey=='PCS Wednesday Hours'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></td>
<td ng-click="sort('PCS Thursday Hours')"><b>PCS Thu</b>
<span class="glyphicon sort-icon" ng-show="sortKey=='PCS Thursday Hours'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span> </td>
<td ng-click="sort('PCS Friday Hours')"><b>PCS Fr</b>
<span class="glyphicon sort-icon" ng-show="sortKey=='PCS Friday Hours'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></td>
<td ng-click="sort('PCS Saturday Hours')"><b>PCS Sat</b>
<span class="glyphicon sort-icon" ng-show="sortKey=='PCS Saturday Hours'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></td>
<td ng-click="sort('PCS Sunday Hours')"><b>PCS Sun</b>
<span class="glyphicon sort-icon" ng-show="sortKey=='PCS Sunday Hours'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></td>
</tr>
<tbody>
<tr ng-repeat="n in list_data| orderBy:sortKey:reverse | filter:search track by $index">
<td>{{n.ParticipantName}}</td>
<td>{{n.Function}}<a><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></a></td>
<td>{{n.attendance_mo==0?"":"x"}}</td>
<td>{{n.attendance_tu==0?"":"x"}}</td>
<td>{{n.attendance_we==0?"":"x"}}</td>
<td>{{n.attendance_th==0?"":"x"}}</td>
<td>{{n.attendance_fr==0?"":"x"}}</td>
<td>{{n.Lanyard_Status}}</td>
<!--<td>{{n.AssistiveDevices}}</td>-->
<!--<td>{{n.Lanyard}}</td>-->
<!--<td>{{n.Wheelchair_Van}}</td>-->
<!--<td>{{n.Transit_Van}}</td>-->
<!--<td>{{n.VanComments}}</td>-->
<!--<td>{{n.Pick_Up_Time}}</td>-->
<!--<td>{{n.Drop_Off_Time}}</td>-->
<!--<td>{{n.TransportationComments}}</td>-->
<td>{{n.PCS_Hours_Monday}}</td>
<td>{{n.PCS_Hours_Tuesday}}</td>
<td>{{n.PCS_Hours_Wednesday}}</td>
<td>{{n.PCS_Hours_Thursday}}</td>
<td>{{n.PCS_Hours_Friday}}</td>
<td>{{n.PCS_Hours_Saturday}}</td>
<td>{{n.PCS_Hours_Sunday}}</td>
<!--<td>{{n.stlcid}}</td>-->
<!--<td>{{n.physical_address}}</td>-->
<!--<td>{{n.disenrolled}}</td>-->
<!--<td>{{n.deceased}}</td>-->
<!--<td>{{n.comments}}</td>-->
<!--<td>{{n.Wheelchair_Van_comments}}</td>-->
<!--<td>{{n.Transit_Van_240_comments}}</td>-->
<!--<td>{{n.Transit_Van_360}}</td>-->
<!--<td>{{n.Transit_Van_360_comments}}</td>-->
<!--<td>{{n.Subaru_Impreza}}</td>-->
<!--<td>{{n.Subaru_Impreza_comments}}</td>-->
<!--<td>{{n.address_lat}}</td>-->
<!--<td>{{n.address_long}}</td>-->
<!--<td>{{n.phone}}</td>-->
</tr>
</tbody>
</table>
<dir-pagination-controls
max-size="5"
direction-links="true"
boundary-links="true" >
</dir-pagination-controls>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"> </script>
<script type="text/javascript" src="scripts/dirPagination.js"></script>
<script type="text/javascript">
var app = angular.module('app',[]);
app.controller('decontroller', function($scope,$http){
$scope.list_data=[];
$http.get("<?php echo site_url("index.php/transport/ajax_load_data")?>").success(function(result){
console.log("GOT DATA: "+JSON.stringify(result));
$scope.list_data=result;
});
$scope.sort = function(keyname){
$scope.sortKey = keyname; //set the sortKey to the param passed
$scope.reverse = !$scope.reverse; //if true make it false and vice versa
}
});
</script>
<form action="<?php echo site_url("index.php/transport/get_data")?>" method="post">
<input type="hidden" name="id" value="id"><br>
<button><span class="glyphicon glyphicon-eye-open" aria-hidden="true"> </span>
</button>
</form>
</body>
</html>
这是我的控制器
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Transport extends CI_Controller {
/**
* Index Page for this controller.
*
* Maps to the following URL
* http://example.com/index.php/welcome
* - or -
* http://example.com/index.php/welcome/index
* - or -
* Since this controller is set as the default controller in
* config/routes.php, it's displayed at http://example.com/
*
* So any other public methods not prefixed with an underscore will
* map to /index.php/welcome/<method_name>
* @see https://codeigniter.com/user_guide/general/urls.html
*/
public function list_show_data()
{
$this->load->helper('url');
$this->load->view('transport_view');
}
public function get_data()
{
$show = $_POST['id'];
trigger_error("ID FOUND IS $show");
}
public function details()
{
$this->load->helper('url');
$this->load->view('details');
}
public function ajax_load_data()
{
$this->load->helper('url');
$res = $this->db->get('transportation_properties')->result();
$data_arr = array();
$i=0;
foreach($res as $r)
{
$data_arr[$i]['id'] = $r->id;
$data_arr[$i]['ParticipantName'] = $r->ParticipantName;
$data_arr[$i]['Function'] = $r->Function;
$data_arr[$i]['attendance_mo'] = $r->attendance_mo;
$data_arr[$i]['attendance_tu'] = $r->attendance_tu;
$data_arr[$i]['attendance_we'] = $r->attendance_we;
$data_arr[$i]['attendance_th'] = $r->attendance_th;
$data_arr[$i]['attendance_fr'] = $r->attendance_fr;
$data_arr[$i]['Lanyard_Status'] = $r->Lanyard_Status;
$data_arr[$i]['AssistiveDevices'] = $r->AssistiveDevices;
$data_arr[$i]['Lanyard'] = $r->Lanyard;
$data_arr[$i]['Wheelchair_Van'] = $r->Wheelchair_Van;
$data_arr[$i]['Transit_Van'] = $r->Transit_Van;
$data_arr[$i]['VanComments:'] = $r->VanComments;
$data_arr[$i]['Pick_Up_Time'] = $r->Pick_Up_Time;
$data_arr[$i]['Drop_Off_Time'] = $r->Drop_Off_Time;
$data_arr[$i]['TransportationComments'] = $r->TransportationComments;
$data_arr[$i]['PCS_Hours_Monday'] = $r->PCS_Hours_Monday;
$data_arr[$i]['PCS_Hours_Tuesday'] = $r->PCS_Hours_Tuesday;
$data_arr[$i]['PCS_Hours_Wednesday'] = $r->PCS_Hours_Wednesday;
$data_arr[$i]['PCS_Hours_Thursday'] = $r->PCS_Hours_Thursday;
$data_arr[$i]['PCS_Hours_Friday'] = $r->PCS_Hours_Friday;
$data_arr[$i]['stlcid'] = $r->stlcid;
$data_arr[$i]['physical_address'] = $r->physical_address;
$data_arr[$i]['disenrolled'] = $r->disenrolled;
$data_arr[$i]['deceased'] = $r->deceased;
$data_arr[$i]['comments'] = $r->comments;
$data_arr[$i]['Wheelchair_Van_comments'] = $r->Wheelchair_Van_comments;
$data_arr[$i]['Transit_Van_240_comments'] = $r->Transit_Van_240_comments;
$data_arr[$i]['Transit_Van_360'] = $r->Transit_Van_360;
$data_arr[$i]['Transit_Van_360_comments'] = $r->Transit_Van_360_comments;
$data_arr[$i]['Subaru_Impreza'] = $r->Subaru_Impreza;
$data_arr[$i]['Subaru_Impreza_comments'] = $r->Subaru_Impreza_comments;
$data_arr[$i]['address_lat'] = $r->address_lat;
$data_arr[$i]['address_long'] = $r->address_long;
$data_arr[$i]['phone'] = $r->phone;
$i++;
}
$this->output->set_content_type('application/json');
echo json_encode($data_arr);
}
}
我怀疑您有其他问题，但这行不通。
site_url("index.php/transport/ajax_load_data")
站点url只需要控制器和方法(或者假设在配置中设置了默认方法，并且默认值为'index')
site_url("transport/ajax_load_data")
从文档:http://www.codeigniter.com/user_guide/helpers/url_helper.html site_url
你可能也想有一个重新读取生成查询结果，因为你创建一个多维数组似乎有点冗长，可能毫无意义。你可以直接使用result_array()
Docs: http://www.codeigniter.com/user_guide/database/results.html
然而，你很可能有你的理由创建你的结果数组的方式，但它似乎是有点效率低下。
响应后:
在CI中创建链接使用:
<a href="<?php echo site_url('controller/method'); ?>"><img glyph or text or whatever /></a>
peasy方便。您使用了以下占位符:
<td>{some_named_item}</td>
因此，您必须找到设置占位符的位置并更改它们。设置链接很简单，还有什么问题我误解了吗?
相关文章：
- 单击按钮即可在浏览器的新选项卡中打开 Sapui5 详细信息页面
- 如何在完整日历中的当天点击时显示活动详细信息
- Magento目录价格折扣规则不适用于产品详细信息页面
- 获取本地时间的JS日期，日期对象中没有时区详细信息
- Json阵列的详细信息显示在三页的angularjs中
- 如何获取数组详细信息另一页
- 如何用java脚本从领英获取详细信息
- Javascript函数详细信息
- 从回调中获取更详细的错误信息
- 没有模型的拆分应用程序的详细信息页
- 将结果页链接到详细信息页
- 根据上一页中选择的名称获取Json的详细信息(Angular）
- 当我点击按钮显示更多的信息在同一页javascript
- 如何单击表行中的图标并重定向到新的“详细信息页”;在angularjs
- jQuery基于下拉信息显示信息
- 如何将输入的信息从一页输出到另一页
- 将信息从一页传递到另一页(脱机）
- 将信息从一个JavaScript页面传递到另一个具有特定信息的信息
- 谷歌地图API-带有位置详细信息的信息窗口自动打开，不包含内容
- 使用数据库信息更改当前页
