0

サーバーから取得した情報のテーブルを表示するために ClientController とテンプレートを使用しているページがあります。データのコレクションごとに、2 つのテーブル行が必要です。1 つは常に表示され、もう 1 つは最初の行がクリックされたときにのみ表示されます。

ここでもう少し進んでいるので、コードを単純化しましたが、これに影響するとは思わなかったものは何もありません。

私の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 でアラートがポップアップ表示されますが、テーブルの行が期待どおりに表示されません。

4

1 に答える 1

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>

一度に 1 つだけ開いておくには

<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>
于 2014-07-21T03:59:08.977 に答える