angular passing value from to different page when anchor tag is clicked

Question

I'm using angular single page application and is struck is particular place. Index page consist of ng-view

I'm getting value from json file into my home page which is shown in table and each name is covered with anchor tag

  <h2 class="text-center">{{message}}</h2>
    <div class="container">

      <table class="table table-striped">

        <tbody>
          <tr ng-repeat = 'row in rows'>
            <td><a href="#about">{{row.name}}<a></td>
            <td>{{ row.phone}}</td>
            <td>{{row.time}} </td>  
          </tr>

        </tbody>
      </table>
    </div>
    <hr />

As we can observe that first table data enclosed with anchor tag.

when I click on the anchor tag, I want the it to redirect to about page and the name I clicked should be displayed in about page

My about page is shown below

<div class="jumbotron text-center">
        <h5>{{message}}</h5>
     hi {{row.name}}
    </div>

http://plnkr.co/edit/4VT5kr41zJZIphiS7q9L?p=preview

Please help me out getting data from one page to another.

Any help is appreciated

http://stackoverflow.com/questions/22408790/angularjs-passing-data-between-pages — Danny, Nov 20 '15 at 14:31

score 2 · Accepted Answer · answered Nov 20 '15 at 14:39

If all you need is the person name, you can pass it using $routeParams.

In the html you can write links just like:

<a href="#about/{{row.name}}">{{row.name}}<a>

and then edit the about route just like:

// route for the about page
            .when('/about/:person', {
                templateUrl : 'pages/about.html',
                controller  : 'aboutController'
            })

and add the $scope.person variable to the about controller:

scotchApp.controller('aboutController', function($scope, $routeParams) {
        $scope.message = 'Clicked person name from home page should be dispalyed here';
        $scope.person = $routeParams.person;
    });

finally, the about.html view:

<div class="jumbotron text-center">
    <h5>{{message}}</h5>
 hi {{person}}
</div>

Demo: http://plnkr.co/edit/v1mdvmSQ6pE1oxYAdyKi?p=preview

Docs: https://docs.angularjs.org/api/ngRoute/service/$routeParams

angular passing value from to different page when anchor tag is clicked

1 Answers1