使用 AngularJS 在新页面中查看选定的行详细信息

view the selected row detail in new page using angularjs

本文关键字：详细信息 AngularJS 新页面 使用      更新时间：2023-09-26

嗨，我想在下一页显示选定的行值详细信息，我在第一页中仅显示名称和城市，单击按钮后将查看其余字段。 我的网页

 <!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>

我的控制器是

   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，请使用 name 尝试此操作：您的 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');
    }
    });

现在，在下面的"查看详细信息"页面的控制器用户中，可以从本地存储中准备好数据。

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中具有所选行的id。SelectedRecordeid，因此您可以使用此 ID 调用服务，并在第二页中获取完整详细信息。

嗨，我

得到了我的问题的解决方案，我的控制器是

app.controller('homeController', function($scope, $http, $location,
         $rootScope, $filter, $window) {
    $http.get("app/components/shared/json/Patients.json").success(
            function(response) {
                $scope.emp = response.Employees
                    $scope.select = function(list) {
                    debugger;
                    //$rootScope.selected = list;
                    $scope.selected = list;
                    localStorage.setItem("NamesDetails", JSON
                            .stringify($scope.selected));
                    $location.path('/homeView')
                    console.log(list)
                }
                $scope.cart = JSON.parse(localStorage.getItem("NamesDetails"));
                console.log($scope.cart)
            })
})

和 HTML 格式 

<td> <a ng-click="select(list)">view</a></td>

我知道我回答这个问题有点晚了，但对于那些仍然面临这个问题的人来说，这是我的代码，它在敲打我的头 3 天寻找解决方案后工作。

我正在使用ng资源来显示详细信息。我有一家名为"listfactory"的工厂。

/

/listFactory.js

Angular.module（"main"）.factory（'listFactory'， function（$resource）{

        var url = 'data.json'
        return $resource(url, {}, {
            query:{ 
                method: "GET",
                params: {},
                isArray: true,
                cache: true,
                //transformResponse
                //interceptor
            },
            get: {
                method: "GET",
                params: {},
                isArray: true,
                cache: true,
           }
    })

}）;

控制器 "detailscontroller.js

.controller（"detailsController"， function（$scope， $http， $routeParams， $route， listFactory）{

            $scope.employee = {};
            $scope.employee = listFactory.get({id: $routeParams.id });
            $scope.employee.$promise.then(function(data) {
                console.log(data);
                //$scope.employee = data[$routeParams.id];
                angular.forEach( data,function(employee){
            console.log(employee);
            if( employee.email == $routeParams.id ){
                $scope.employee = employee;
            }
             });
            
    });

}）;

基本上，我正在迭代循环以检查路由参数是否与员工的电子邮件匹配。希望这对:)有所帮助

相关文章：