Вопрос:

How to show table data in separate page in AngularJS

angularjs

191 просмотра

2 ответа

11 Репутация автора

This is my dashboard.html where all the user data will display from controller file. Now what I want is that when I click the button of each user it will display the information of user in a separate page.

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

When I click the View button it will display that person info in separate page. How can I do it? Please help. Thanks in advance.

This is my controller.js file:

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"}
             ];
});
Автор: BHAGAT Источник Размещён: 12.03.2017 04:52

Ответы (2)


0 плюса

481 Репутация автора

i believe there's more than enough ways to do this just search "passing objects between controllers angularjs" google can get you more than enough results..

it's either done by passing the object in URL, a service ,or using local storage.

common things are

  • you'll need a controller for the details page
  • you'll probably need to pass the employee object in the view() function --> view(employee)
Автор: Modar Na Размещён: 12.03.2017 05:27

0 плюса

580 Репутация автора

You can do it, in following way.

Step 1 - Update your HTML to pass, employee Id as parameter in "view" method

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

Step 2 - Update routing state to send the ID as parameter for detail page.

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

Step 3 - Write the "view" function to change state from listing page to detail page. Add it in your "myCtrl" method

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

Step 4 - To get parameter on detail page(In controller method) in following way.

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

So now you have selected employee Id on detail page controller, so you can bind the details of that employee to view.

Автор: Banshi Lal Dangi Размещён: 12.03.2017 05:35
Вопросы из категории :
32x32