错误的数据绑定到标记 ID 导致引导导航选项卡失败

Question

我在引导中使用导航选项卡类，但我将这些选项卡作为手风琴面板主体的内容。我正在使用 Ng-repeat 来填写选项卡的数量和标签的内容。

<div class="panel-body">
                                <ul class="nav nav-tabs">
                                    <li ng-repeat="sub in All | unique:'onderwerpen'"><a data-toggle="tab" href="#{{sub.onderwerpen}}">{{sub.onderwerpen}}</a></li>
                                </ul>
                                <div class="tab-content">
                                    <div id="{{sub.onderwerpen}}" class="tab-pane fade active">
                                        <table class="table table-bordered text-center">
                                            <thead>
                                                <tr>
                                                    <th>Jaar</th>
                                                    <th>Waarde</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>John</td>
                                                    <td>Doe</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

这是导航选项卡的代码，但我认为我使用 {{sub.onderwerpen}} 分配的 id 没有正确分配，但我不知道出了什么问题。我不知道这是否相关，但sub.onderwerpen只返回包含空格的字符串，这是问题所在吗？如果是这样，我该如何解决此问题？在回答之前，我无法使用{{$index}}作为绑定到 id 的参数，因为我在父面板中使用了它。

Answer 1

ng-repeat 指令创建新的子作用域sub并在此作用域中分配变量。

相对于包含变量的范围sub <div class="tab-content">位于父作用域中，因此看不到它。

您需要在tab-contentdiv中再ng-repeat。

<div class="panel-body">
  <ul class="nav nav-tabs">
    <li ng-repeat="sub in All | unique:'onderwerpen'">
      <a data-toggle="tab" ng-href="#{{sub.onderwerpen}}">{{sub.onderwerpen}}</a>
    </li>
  </ul>
  <div class="tab-content">
    <div ng-repeat="sub in All | unique:'onderwerpen'" id="{{sub.onderwerpen}}" class="tab-pane fade">
      <table class="table table-bordered text-center">
        <thead>
          <tr>
            <th>Jaar</th>
            <th>Waarde</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>John</td>
            <td>Doe</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

另外，当您的链接包含变量时，请使用ng-href。

另请注意，如果sub.onderwerpen用作 DOM 元素的id则

• 必须至少包含一个字符
• 不得包含任何空格字符
• 在 HTML 中，所有值都不区分大小写