javascript - 我怎样才能显示第一个项目，在 angularjs 上切换就绪

Question

我想显示 ng-repeat 中第一个项目的详细信息，可以使用 angularjs 进行切换。

在代码中，您可以看到第一个按钮显示的详细信息，但无法像其他按钮一样进行切换。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="">
  <div ng-repeat="i in ['I want to toggle', 'toggle 2', 'toggle 3', 'toggle 4']">
    <table class="table table-bordered">
      <thead>
      </thead>
      <tbody>
        <tr>
          <td>
            <a ng-click="showDetail = !showDetail"> <!-- toggle here -->
              <input type='button' value='{{i}}' />
            </a>
          </td>
        </tr>
      </tbody>
    </table>
    <div ng-show="showDetail || $first">----Detail!</div>
  </div>
</div>

Answer 1

原因是因为这行<div ng-show="showDetail || $first">----Detail!</div> 。这就是说第一个项目将始终可见。使用ng-init设置showDetail基于它是否是第一个并且它应该起作用。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="">
  <div ng-repeat="i in ['I want to toggle', 'toggle 2', 'toggle 3', 'toggle 4']" 
       ng-init="showDetail = $first ? true : false">
    <table class="table table-bordered">
      <thead>
      </thead>
      <tbody>
        <tr>
          <td>
            <a ng-click="showDetail = !showDetail"> <!-- toggle here -->
              <input type='button' value='{{i}}' />
            </a>
          </td>
        </tr>
      </tbody>
    </table>
    <div ng-show="showDetail">----Detail!</div>
  </div>
</div>