Question

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

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

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

我只能使用条件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而我只是迷路了。

此外，点击帐户/客户不会更新标签。它们都具有与tab-pane相关的正确的数据切换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>

Answer 1

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

在bootstrap tab-content / tab-pane上进行ng-repeat

1 个答案: