引导程序选项卡内容/选项卡窗格上的 ng-repeat答案

【问题标题】：ng-repeat on bootstrap tab-content/tab-pane引导程序选项卡内容/选项卡窗格上的 ng-repeat
【发布时间】：2015-03-19 16:22:23
【问题描述】：

我无法让我的标签内容在页面加载时正确显示。我拥有的是一个名为apiList 的对象工厂，然后我使用两个ng-repeats，一个命中apiList 中的每个对象，然后下一个遍历该对象并将其所有数据放在页面上。我使用#tab{{$index}} 来保持我的数据切换在按钮和选项卡窗格之间对齐。

问题似乎在于我如何在tab-pane 上使用active 属性。

到目前为止，我有三个已知的测试用例。

我只能通过使用条件ng-class="{ 'active': $index == 0}" 从第一个对象获取信息，如... <div ng-repeat="(key, data) in apiList[0]" class="tab-pane active" id="tab{{$index}}" ng-class="{ 'active': $index == 0}">
如果我从行中删除条件，则不会出现任何内容
如果我只是将active 添加到窗格值（无条件）（即<div ng-repeat="(key, data) in apiList[0]" class="tab-pane active" id="tab{{$index}}">他们都出现了。

所以我的问题似乎在于我需要如何为 ng-repeat 打开/关闭我的活动，而我只是迷路了。

此外，单击帐户/客户不会更新选项卡。它们都具有与选项卡窗格相关的正确数据切换 ID（0 和 1），因此我认为这是active 问题的一部分。每当我点击我的选项卡窗格时，它们都会很好地展开。

这是我的工厂、ng-repeat(s) 以及我最初设置的代码（功能性）。

工厂

.factory('APIMethodService', [function() {
  var Head = "api.verifyvalid";
  return {
    apis: [
      {
      accounts: [
        {
          parameters : [
            {
              name : "Accounts",
              version : "1.0"
            }
          ],
          uri: Head + "/v1/accounts/account_number",
          methods : [
            {
              name: "Account Number",
              desc: "Returns the account number."
            }, {
              name: "Account Money",
              desc: "Returns the monetary amount within the account."
            }
          ]
        },
        {
          parameters : [
            {
              name : "Accounts",
              version : "2.0"
            }
          ],
          uri: Head + "/v2/accounts/account_number",
          methods: [
            {
              name: "Account Number",
              desc: "Returns the account number."
            }, {
              name: "Account Money",
              desc: "Returns the monetary amount within the account."
            }, {
              name: "Account Token",
              desc: "Returns the account's token."
            }
          ]
        }
      ],
      customers:[
        {
          parameters : [
            {
              name : "Customers",
              version : "1.0"
            }
          ],
          uri: Head + "/v1/customers/customer_number",
          methods : [
            {
              name: "Customer Name",
              desc: "Returns the customer's name."
            }, {
              name: "Customer ID",
              desc: "Returns the customer's ID."
            }
          ]
        },
        {
          parameters : [
            {
              name : "Customers",
              version : "2.0"
            }
          ],
          uri : Head + "/v2/customers/customer_number",
          methods: [
            {
              name: "Customer Name",
              desc: "Returns the customer's name."
            }, {
              name: "Customer ID",
              desc: "Returns the customer's ID."
            }, {
              name: "Customer Email",
              desc: "Returns the customer's email."
            }
          ]
        }
      ]
    }
    ]
  };

ng-repeat（只是右侧的标签）

<div class="col-md-9">
    <div class="tab-content">
      <div ng-repeat="(key, data) in apiList[0]" class="tab-pane active" id="tab{{$index}}">
        <div ng-repeat="api in apiList[0][key]">
          <div class="panel panel-info" id="panel{{$index}}">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-target="#collapse{{key}}{{$index}}" class="collapsed">
                  {{api.uri}}<i class="newTab" ng-click="apiTab(api)">(Open in new tab)</i>
                </a>
              </h4>
            </div>
            <div id="collapse{{key}}{{$index}}" class="panel-collapse collapse">
              <div class="panel-body">
                <table class="table">
                  <tr ng-repeat="method in api.methods">
                    <td>{{method.name}}</td>
                    <td>{{method.desc}}</td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
  </div>
</div>

以下代码是我最初拥有的，在尝试进一步压缩之前

<div class="col-md-9" style="display:none">
          <div class="tab-content">

            <!-- Accounts -->

            <div class="tab-pane active" id="tab0">
              <div ng-repeat="api in apiList[0].accounts">
                <div class="panel panel-info" id="panel0">
                  <div class="panel-heading">
                    <h4 class="panel-title">
                      <a data-toggle="collapse" data-target="#collapseAccountsV{{$index}}" class="collapsed">
                        {{api.uri}}
                      </a>
                      <i class="newTab" ng-click="apiTab(api)">(Open in new tab)</i>
                    </h4>
                  </div>
                  <div id="collapseAccountsV{{$index}}" class="panel-collapse collapse">
                    <div class="panel-body">
                      <table class="table">
                        <tr ng-repeat="method in api.methods">
                          <td>{{method.name}}</td>
                          <td>{{method.desc}}</td>
                        </tr>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Customers -->

            <div class="tab-pane" id="tab1">
              <div ng-repeat="api in apiList[0].customers">
                <div class="panel panel-info" id="panel1">
                  <div class="panel-heading">
                    <h4 class="panel-title">
                      <a data-toggle="collapse" data-target="#collapseCustomersV{{$index}}" class="collapsed">
                        {{api.uri}}<i class="newTab" ng-click="apiTab(api)">(Open in new tab)</i>
                      </a>
                    </h4>
                  </div>
                  <div id="collapseCustomersV{{$index}}" class="panel-collapse collapse">
                    <div class="panel-body">
                      <table class="table">
                        <tr ng-repeat="method in api.methods">
                          <td>{{method.name}}</td>
                          <td>{{method.desc}}</td>
                        </tr>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Other -->
            <div class="tab-pane fade" id="tab3">
              <!-- TBA -->
            </div>
          </div>
        </div>

【问题讨论】：

请用您的解决方案回答问题，或删除问题。我们不在这里SOLVED。
@j08691 你有什么建议，我不介意删除，但如果点赞的人只是好奇或也有问题，我不介意。对不起！ :(
没关系。您可以像其他人一样发布您的解决方案作为答案。你也可以接受（但你没有得到分数）。

标签： javascript angularjs twitter-bootstrap

【解决方案1】：

菜鸟错误，一切正常！我在同一页面上使用我的旧代码作为基本大纲并将旧代码设置为style="display:hidden" 但这仍然意味着 ID 是 DOM 的一部分，因此我无法正确更改我的选项卡（重复/ ID 冲突）。

【讨论】：