Displaying dynamic views for multiple profiles (customers) with AngularJs

Question

I am getting the data for customers and displaying in on table (ng-repeat) on the main page. The main page also has search option which filter the data by a particular customer ID.

 <table id="searchResults" class="table table-bordered"> 
    <tr>
      <th>Klantnummer</th>
      <th>Voorletters</th>
      <th>Tussenvoegsel</th>
      <th>Achternaam</th>
      <th>Geboortdatum</th>
      <th> Actief Sinds</th>
    </tr>
    <tr ng-repeat="data in allData | filter:kvk">
      <td><a href="#">{{data.kvk}}</a></td> //this is the customer ID
      <td>{{data.voorletters}}</td>
      <td>{{data.tussenvoegsel}}</td>
      <td>{{data.achternaam}}</td>
      <td>{{data.geboortedatum}}</td>
      <td>{{data.actief}}</td>
    </tr>
  </table>

The result I want to reach is that when a user clicks on the customer ID (which is one of the rows on the table displayed), a new view should open, where more details about that particular customer can be seen. I know basics of routing, but I can not get the best way to solve this problem, as there are many customers!

How can I give each customer ID, a different view that shows detail of that customer? What tools does Angular have for that? Just need a rough idea how to approach this problem using AngularJS!

Answer 1

Well you could either redirect user to a 'show' page like so:

<table id="searchResults" class="table table-bordered"> 
  <tr>
    <th>Klantnummer</th>
    <th>Voorletters</th>
    <th>Tussenvoegsel</th>
    <th>Achternaam</th>
    <th>Geboortdatum</th>
    <th> Actief Sinds</th>
    <th></th>
  </tr>
  <tr ng-repeat="data in allData | filter:kvk">
    <td><a href="#">{{data.kvk}}</a></td> //this is the customer ID
    <td>{{data.voorletters}}</td>
    <td>{{data.tussenvoegsel}}</td>
    <td>{{data.achternaam}}</td>
    <td>{{data.geboortedatum}}</td>
    <td>{{data.actief}}</td>
    <td><a ng-click="viewCustomer(data.kvk)" class="btn btn-xs btn-success"><span class="glyphicon glyphicon-search"></span></a></td>
  </tr>
</table>

then in your controller:

$scope.viewClient = function(id) {
  //path to your view using id
};

or else create a hidden table in the same view and show upon button click. I am using bootstrap accordion for sample purposes.

<table id="searchResults" class="table table-bordered"> 
  <tr>
    <th>Klantnummer</th>
    <th>Voorletters</th>
    <th>Tussenvoegsel</th>
    <th>Achternaam</th>
    <th>Geboortdatum</th>
    <th> Actief Sinds</th>
    <th></th>
  </tr>
  <tr ng-repeat="data in allData | filter:kvk">
    <td><a href="#">{{data.kvk}}</a></td> //this is the customer ID
    <td>{{data.voorletters}}</td>
    <td>{{data.tussenvoegsel}}</td>
    <td>{{data.achternaam}}</td>
    <td>{{data.geboortedatum}}</td>
    <td>{{data.actief}}</td>
    <td><a data-toggle="collapse" data-target="#{{data.kvk}}"></a>   </td>
  </tr>
  <tr>
    <td>
      <div class="accordion-body collapse" id="{{data.kvk}}">
        <!-- your content here -->
      </div>
    </td>
</table>

hope it helps.