Displaying dynamic views for multiple profiles (customers) with AngularJs - 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>{{data.kvk}}</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>{{data.kvk}}</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>{{data.kvk}}</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.