如何根據stateParams顯示頁面的一部分？

Question

我有一個表有多行，並且它們中的每一個都有一個叫做ID的<td> 。

<table> 
 
    <thead> 
 
     <tr> 
 
      <th> 
 
       ID 
 
      </th> 
 
      <th> 
 
       XYZ 
 
      </th> 
 
      <th> 
 
       XYZ 
 
      </th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td> 
 
       <a href="">10</a> 
 
      </td> 
 
      <td> 
 
       XYZ 
 
      </td> 
 
      <td> 
 
       XYZ 
 
      </td> 
 
     </tr> 
 
     <tr colspan="3" class="more-info"> 
 
      <!-- I want to show this row if the $stateparams has an id === 10; --> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <a href="">120</a> 
 
      </td> 
 
      <td> 
 
       XYZ 
 
      </td> 
 
      <td> 
 
       XYZ 
 
      </td> 
 
     </tr> 
 
     <tr colspan="3" class="more-info"> 
 
      <!-- I want to show this row if the $stateparams has an id === 120; --> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <a href="">420</a> 
 
      </td> 
 
      <td> 
 
       XYZ 
 
      </td> 
 

 
      <td> 
 
       XYZ 
 
      </td> 
 
     </tr> 
 
     <tr colspan="3" class="more-info"> 
 
         <!-- I want to show this row if the $stateparams has an id === 420; --> 
 
     </tr> 
 
    </tbody> 
 
</table

當你點擊一個id，請求將被髮送到服務器以獲取由ID數據。數據將顯示在ID的行下方的表格行中。點擊也會更新url，例如從localhost:3000/app更改爲localhost:3000/app/420。

如何僅顯示table row下面的匹配行stateparams.id？如果刷新頁面（localhost:3000/app/420），它應該仍然顯示。

在此先感謝！

Answer 1

你可以做這樣的事情：

在HTML中：

<tr colspan="3" class="more-info" ng-if="CurrentID=='120'"> 
    <!-- I want to show this row if the $stateparams has an id === 120; --> 
    </tr> 

在JS

app.controller("myCtrl", function($scope,$stateParams) { 

     $scope.CurrentID = 0; 

     if($stateParams.id != undefined){ 

      $scope.CurrentID = $stateParams.id; 

     } 

    });