Question

这是我的 dashboard.html ，其中所有用户数据都将显示在控制器文件中。现在我想要的是，当我点击每个用户的按钮时，它将在一个单独的页面中显示用户的信息。

<html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
        <script src="newcontroller.js"></script>
        <script src="controller.js"></script>
        <link rel="stylesheet" href="stylingpage.css">

</head>
<body ng-app="myModule">
<div ng-controller="myCtrl">
<h2 align="center">Welcome</h2>
<table width="20%">
    <thead>
        <tr>
            <th>ID</th>
            <th>UserName</th>
            <th>Password</th>
        </tr>
    </thead>
        <tbody>
            <tr ng-repeat="employee in employees">
                <td>{{employee.id}}</td>
                <td>{{employee.name}}</td>
                <td>{{employee.password}}</td>
                <td><button type="button" ng-click="view()">View</button></td>
            </tr>

        </tbody>
</table>
</div>  
</body>
</html>

单击“查看”按钮时，它将在单独的页面中显示该人员信息。我该怎么做？请帮忙。提前谢谢。

这是我的 controller.js文件：

var app=angular.module('mainApp',['ngRoute']);
app.config(function($routeProvider){
    $routeProvider
    .when('/',{
        templateUrl:'login.html'
    })
    .when('/newdashboard',{
        resolve:{
            "check":function($location,$rootScope){
                if(!$rootScope.loggedIn){
                    $location.path('/');
                }

            }
        },
            templateUrl:'newdashboard.html'

    })
    .when('/userdetails',{

        templateUrl:'userdetails.html'
    })
    .otherwise({
        redirectTo:'/'
    });
});
app.controller('loginCtrl',function($scope,$location,$rootScope){
    $scope.submit=function(){

        if($scope.username=='admin' && $scope.password =='admin'){
            $rootScope.loggedIn=true;
            $location.path('/newdashboard');
        }else{
            alert('wrong Username or password. Try Again');
        }
    };
});

app.controller('myCtrl',function($scope){
            $scope.employees=[
               {id:"101",name:"User 1",password:"User1@123"},
               {id:"102",name:"User 2",password:"User2@123"},
               {id:"103",name:"User 3",password:"User3@123"},
               {id:"104",name:"User 4",password:"User4@123"},
               {id:"105",name:"User 5",password:"User5@123"},
               {id:"106",name:"User 6",password:"User6@123"}
             ];
});

Answer 1

我相信有足够的方法可以做到这一点只需搜索＆＃34;在控制器之间传递对象angularjs＆＃34; google可以获得足够的结果通过在URL，服务或本地存储中传递对象来完成它。

常见的事情是

您需要一个控制器来获取详细信息页面
您可能需要传递employee函数中的view()对象 - ＆gt; view(employee)

Answer 2

你可以通过以下方式完成。

步骤1 - 更新您的HTML以传递，员工ID作为参数在＆＃34;查看＆＃34;方法

<td><button type="button" ng-click="view(employee.id)">View</button></td>

步骤2 - 更新路由状态以将ID作为详细信息页面的参数发送。

.when('/userdetails/:id',{
   templateUrl:'userdetails.html'
})

第3步 - 写下＆＃34;视图＆＃34;用于将状态从列表页面更改为详细页面的功能。将它添加到你的＆＃34; myCtrl＆＃34;方法

 $scope.view= function(userId) {
          $location.path('/userdetails/').search({id: userId});
 }

步骤4 - 以下列方式获取详细信息页面上的参数（在控制器方法中）。

var urlParams = $location.search();
urlParams.id will return Empolyee Id

现在您已在详细信息页面控制器上选择了员工ID，因此您可以绑定该员工的详细信息以进行查看。

如何在AngularJS的单独页面中显示表数据

2 个答案: