CODEWITHSUNDEEP
javascriptangularjs
Gupteshwari
Gupteshwari

Reputation: 89

How do I navigate to other page with respective data on ng-click of a row table

I have a view lets assume index.cshtml which is getting data using a service and showing in a table for which each row is clickable. And after I click on a row it should navigate to other page lets call it details.html with respective information of particular row.

`<table class="table table-bordered table-condensed table-hover table-responsive">
            <thead>
                <tr class="bg-primary">
                    <th>Id</th>
                    <th>Name</th>
                    <th>Description</th>
                    <th>Role</th>
                </tr>
            </thead>
            <tbody ng-repeat="user in Users">
                <tr ng-click="GetUser(Users,user.userLoginID)" style="cursor:pointer" >
                    <td>{{ user.userLoginID }}</td>
                    <td>{{ user.userName }}</td>
                    <td>{{ user.descOfUser }}</td>
                    <td>{{ user.userRole }}</td>
                </tr>
            </tbody>
        </table>`

The problem I'm facing is how do I get to navigate to other page with data of row. I tried using query string but for query string my angular stops working on that page. Please tell if I have to use angular-route then how to do that.

Upvotes: 1

Views: 2067

Answers (2)

Thangadurai
Thangadurai

Reputation: 544

Change the your code like below, and make link for get details,

<tbody>
 <tr ng-repeat="user in Users">
                <td>{{ user.userLoginID }}</td>
                <td>{{ user.userName }}</td>
                <td>{{ user.descOfUser }}</td>
                <td>{{ user.userRole }}</td>
                <td><a href="#/user-details/{{user.userLoginID }}" class="btn">&nbsp;<i class="glyphicon glyphicon-edit"></i>&nbsp; details</td>
            </tr>

after that create a route for details.html page,

app.config(['$routeProvider',
 function($routeProvider) {
$routeProvider.
  when('/', {
    templateUrl: '/users.html',
    controller: 'listCtrl'
  })
  .when('/user-details/:userLoginId', {
    templateUrl: '/details.html',
    controller: 'detailsCtrl', // this is new controller name
   })
  .otherwise({
    redirectTo: '/'
  });
}]);

Now created the route with userId as routeParameter to get the details of particular user.

Then create a controller for get and show the details of particular user,

app.controller('detailsCtrl', function ($scope, $location, $routeParams) {
   // call service to get details  
  // get the user id like this "$routeParams.userLoginId"
});

Finally, display the details in details.html page.

Upvotes: 1

Dvid Silva
Dvid Silva

Reputation: 1162

The way I would do it is: The data should be referenced in the controller or service, your ng-click should be a link instead. Like <a ng-href="/user/{{userLoginID}}">details</a>.

In your routes you create a parameterized route, like user/:id and use $routeParams in your new controller to know which user is the visitor looking for and pass that id to your service to get the right information.

If you wanna do it literally how you're asking, you can pass that information as a get parameter to your new route but it will be a lot messier and insecure.

Upvotes: 0

Related Questions