引导程序选项卡上的ng-repeat tab-content / tab-pane

Question

I am having trouble getting my tab content to appear properly on page load. What I have is a factory of Objects called apiList , I then use two ng-repeats , one which hits each object in the apiList, then the next one which iterates through that object and puts all of its data on the page. I use #tab{{$index}} to keep my data-toggles aligned between the buttons and tab-panes.

The problem seems to be with how I use the active attribute on my tab-pane .

I have three known test cases so far.

1. I can only get information from the first Object by using the condition ng-class="{ 'active': $index == 0}" as in.. <div ng-repeat="(key, data) in apiList[0]" class="tab-pane active" id="tab{{$index}}" ng-class="{ 'active': $index == 0}">

2. If I remove the conditional from the line then nothing appears

3. And if I just add active to the pane value (with no condition) (ie <div ng-repeat="(key, data) in apiList[0]" class="tab-pane active" id="tab{{$index}}"> They all appear.

So my problem seems to be with how I need to turn on/off my active for the ng-repeat and I am just getting lost.

Also, clicking on accounts/customers does not update the tabs. They both have the right data-toggle ID's (0 and 1) in respect to the tab-panes so I assume it is part of the active issue. And whenever I click on my tab panes, they do expand just fine.

Here is my Factory, ng-repeat(s), and the code that was my original setup (functional).

Factory

.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 (just the right-hand tabs)

<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>

The following code is what I originally had, before trying to crunch it down more

<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>

Answer 1

Noob mistake, everything works fine! I was using my old code as the base outline on the same page and had set that old code to style="display:hidden" but this still meant that the ID's were apart of the DOM, hence why I couldn't change my tab's properly (duplicate/conflicting ID's).