Question

我有一个页面，它使用我的ClientController和模板来显示从服务器检索的信息表。对于每个数据集合，我希望有2个表格行，一个始终显示，另一个仅显示单击第一个表格的行。

我已经简化了代码，因为这里还有更多内容，但我认为没有什么能影响到这一点。

我的HTML看起来像

<table>
  <tbody ng-repeat="session in sessions" ng-switch on="sessionID">
    <tr>
      <td>{{session.test_name}}</td>
      <td><a ng-click="showID(session.session_id)">view {{session.session_id}}</a></td>
    </tr>
    <tr class="pop-open" ng-switch-when="session.sessionID">
      <td colspan="2">
        {{session.session_ID}} and more details
      </td>
    </tr>
  </tbody>
</table>

在我的controllers.js中我有

.controller('ClientController', ['$scope', function($scope) {
  $scope.showID = function(sessionID){
    $scope.sessionID = sessionID
    alert($scope.sessionID)
  }
}])

警告弹出正确的ID，但表格行没有像我预期的那样显示。

Answer 1

你实际上不需要ng-switch用于这个简单的用例场景，在会话中添加类似showDetails的变量，应该这样做......

<table>
  <tbody ng-repeat="session in sessions">
    <tr>
      <td>{{session.test_name}}</td>
      <td><a ng-click="session.showDetails = !session.showDetails">view details</a></td>
    </tr>
    <tr class="pop-open" ng-show="session.showDetails">
      <td colspan="2">
        {{session.session_ID}} and more details
      </td>
    </tr>
  </tbody>
</table>

一次只能打开一次

<table>
  <tbody ng-repeat="session in sessions">
    <tr>
      <td>{{session.test_name}}</td>
      <td><a ng-click="showDetailsOfId = session.session_id">view details</a></td>
    </tr>
    <tr class="pop-open" ng-show="showDetailsOfId == session.session_id">
      <td colspan="2">
        {{session.session_ID}} and more details
      </td>
    </tr>
  </tbody>
</table>

ng-switch里面的ng-repeat我错过了什么？

1 个答案: