How to pass data to different page using AngularJS? [duplicate]

Question

Quite new to angularJS and trying to pass information from one page to another.

Currently this controller displays a list of customers in a table format, with one column being the "More info".

 ** adminSearch.html **
 <div ng-controller="adminSearch">
 ...    
 <tr ng-repeat-start="custObj in customers | filter:custSearch">                         
    <td> {{custObj.id}} </td>
    <td> {{custObj.name}} </td>
    <td> <a href="#"> More Info </a></td>
 </tr> 
 ...

Controller:

** adminSearch.js **
app.controller('adminSearch', ['$scope', function($scope) {         
$scope.customers = [{id:1, name:'John', email:'[email protected]', phone:'555-1276', account:123456, mylH: '1'},
             {id:2, name:'Mary', email:'[email protected]', phone:'800-BIG-MARY', account:123456, mylH: '1'},
             {id:3, name:'Mike', email:'[email protected]', phone:'555-4321', account:123456, mylH: '0'}];}]);

What I want is when the user clicks "More Info" from the table for one of the customer, it should go to a new page displaying all the information about that customer...

Not sure what the new page needs but I am guessing it needs a new controller:

  ** customerInfo.html **
  <div ng-controller="customerInfo"> ... </div>

  ** customerInfo.js **
  app.controller('customerInfo', ['$scope', function($scope) {
  }]);

Thanks for your help is advance!

You might want to write a service and share data across the page using service's getter setter methods. — Indra Uprade
– Indra Uprade, Commented Jun 30, 2016 at 13:33
You create a directive. In the directive you define your scope, and you call the directive from your html passing data as attributes. [link] [docs.angularjs.org/guide/directive ] — Josué Zatarain
– Josué Zatarain, Commented Jun 30, 2016 at 13:33

Sachila Ranawaka · Accepted Answer · 2016-06-30 13:37:58Z

1

from what i understand is that you need to navigate from one html file to another html file and pass the customer details for that page. then i would suggest to use ui router to navigate through pages. please refer this link https://scotch.io/tutorials/3-simple-tips-for-using-ui-router

answered Jun 30, 2016 at 13:37

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vipresh Over a year ago

Thanks, got it working now, that link helped me a lot. I have one issue now though. When I am displaying the variables using <h4> {{ name }} </h4>, it works fine but if i refresh the page, i just see plain text "{{ name }}". Any suggestions on that issue?

Sachila Ranawaka Over a year ago

Can u check the browser console and post the error

Collectives™ on Stack Overflow

How to pass data to different page using AngularJS? [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related