如何根据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; 

     } 

    });