使用AngularJs显示多个配置文件（客户）的动态视图

我正在为客户获取数据，并在主页上的表（ng repeat）中显示。主页还具有搜索选项，可根据特定的客户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>

三K党
Voorletters
塔森沃塞尔
阿切特南
Geboortdatum
活动信德
//这是客户ID
{{data.voorletters}
{{data.tussenvoegsel}}
{{data.achternaam}
{{data.geboortedatam}
{{data.actief}

我希望得到的结果是，当用户单击customer ID（这是表中显示的行之一）时，应该会打开一个新视图，在该视图中可以看到有关该特定客户的更多详细信息。我知道路由的基本知识，但我无法找到解决此问题的最佳方法，因为有很多客户

---

我如何给每个客户ID，一个显示该客户详细信息的不同视图？Angular有什么工具？只是需要一个粗略的想法如何处理这个问题使用AngularJS

您可以将用户重定向到“显示”页面，如下所示：

<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>

或者在同一视图中创建一个隐藏表，并在单击按钮时显示。我使用引导手风琴为样本的目的

<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>

三K党
Voorletters
塔森沃塞尔
阿切特南
Geboortdatum
活动信德
//这是客户ID
{{data.voorletters}
{{data.tussenvoegsel}}
{{data.achternaam}
{{data.geboortedatam}
{{data.actief}

希望能有帮助

<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>