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>

Answer 2

创建一个对象列表并在div上面的ng-repeat之前初始化它们，然后在对象中设置show hide，使其显示状态

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

如何在angularjs上显示第一个项目，切换就绪

2 个答案: