使用 angularjs 在新頁面中查看所選行的詳細信息

Question

嗨，我想在下一頁顯示所選行值的詳細信息，我在第一頁中僅顯示名稱和城市，單擊按鈕后將查看其余字段。 我的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>

我的控制器是

   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
    }
    });

現在我正在獲取此頁面中的所有記錄並顯示正常，現在我想在詳細信息頁面中查看所選行的其他詳細信息。

Answer 1

您可以使用本地存儲查看選定行的所有數據。 請找到以下代碼：

如果您獲得每條記錄的唯一 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 調用服務並在第二頁中獲取完整詳細信息。

Answer 2

嗨，我的問題得到了解決，我的控制器是

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>

Answer 3

我知道我回答這個問題有點晚了，但對於那些仍然面臨這個問題的人來說，這是我的代碼，在我用了 3 天的時間尋找解決方案后，它起作用了。

我正在使用 ng-resource 來顯示細節。 我有一個名為“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;
            }

             });
            
    });

});

基本上，我正在遍歷循環以檢查 routeparams 是否與員工的電子郵件匹配。 希望這可以幫助：）

使用 angularjs 在新頁面中查看所選行的詳細信息

問題描述

3 個解決方案

解決方案1
1 2016-02-25 05:43:38

解決方案2
1 已采納 2016-02-25 09:14:16

解決方案3
0 2020-07-06 07:47:21

使用 angularjs 在新頁面中查看所選行的詳細信息

問題描述

3 個解決方案

解決方案1 1 2016-02-25 05:43:38

解決方案2 1 已采納 2016-02-25 09:14:16

解決方案3 0 2020-07-06 07:47:21

解決方案1
1 2016-02-25 05:43:38

解決方案2
1 已采納 2016-02-25 09:14:16

解決方案3
0 2020-07-06 07:47:21