您好，我想在下一页中显示所选行值的详细信息，我仅在第一页中显示名称和城市，其余字段将在单击按钮后查看。 我的 html 页面
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="detailCtrlr.js"></script>
</head>
<body ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr>
<td>Name</td>
<td>Age</td>
<td>details</td>
</tr>
<tr ng-repeat="x in names">
<td>{{x.Name}}</td>
<td>{{x.City}}</td>
<td><a href="#/viewdetail" type="submit" name="viewdetails" ng-click="detail()">view</a></td>
</tr>
</table>
</body>
</html>
我的 Controller 是
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("details.json").then(function(response) {
$scope.names = response.data.records;
});
$scope.detail=function(){
//details code here
}
});
现在我正在获取此页面中的所有记录并显示正常，现在我想在详细信息页面中查看所选行的其他详细信息。
最佳答案
您可以使用本地存储查看所选行的所有数据。 请找到以下代码:
如果您获得每条记录的唯一 ID，请尝试以下操作:
您的 html 将:<a href="#/viewdetail" type="submit" name="viewdetails" ng-click="detail(x.id)">view</a>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http,$location,filter) {
$http.get("details.json").then(function(response) {
$scope.names = response.data.records;
});
$scope.detail=function(SelectedRecordeid){
var NameObj = $filter('filter')($scope.names, { id: SelectedRecordeid })[0];
localStorage.setItem("NamesDetails",JSON.stringify(NameObj));
$location.path('/viewdetail');
}
});
如果您没有获得每条记录的唯一 ID，请尝试使用名称:
你的html将是:<a href="#/viewdetail" type="submit" name="viewdetails" ng-click="detail(x.Name)">view</a>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http,$location,filter) {
$http.get("details.json").then(function(response) {
$scope.names = response.data.records;
});
$scope.detail=function(SelectedName){
var NameObj = $filter('filter')($scope.names, { Name: SelectedName })[0];
localStorage.setItem("NamesDetails",JSON.stringify(NameObj));
$location.path('/viewdetail');
}
});
现在，在下面的“viewdetail”页面的 Controller 用户中，准备好来自本地存储的数据。
var getAlldata = IsBlank(localStorage.NamesDetails) ? [] : JSON.parse(localStorage.NamesDetails);
您将获得“getAlldata”变量中的所有数据。
====================
您还可以使用以下方法获取另一个页面中的数据。 在这种情况下，您必须调用两个单独的服务电话。 重写下面的函数
$scope.detail=function(SelectedRecordeid){
window.location.hash = '#/viewdetail?id=' + SelectedRecordeid;
}
现在在第二页中使用以下代码:
function GetQueryString(key) {
'use strict';
var res,
arrQueryStrings = window.location.hash.split("?"),
queryStringCollection;
if (arrQueryStrings[1] === undefined || arrQueryStrings[1] === null) {
return null;
}
queryStringCollection = arrQueryStrings[1].split("&");
$.each(queryStringCollection, function (index, value) {
var queryStringName = value.split("=")[0];
if (queryStringName === key) {
res = value.split("=")[1];
}
});
return res;
}
$scope.SelectedRecordeid = IsBlank(GetQueryString("id")) ? 0 : GetQueryString("id");
现在您在 $scope.SelectedRecordeid 中拥有了所选行的 ID，因此您可以使用此 ID 调用服务并在第二页中获取完整的详细信息。
关于javascript - 使用 angularjs 在新页面中查看所选行的详细信息，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35619041/