Javascript ng在引导选项卡内容/选项卡窗格上重复_Javascript_Angularjs_Twitter Bootstrap

Javascript ng在引导选项卡内容/选项卡窗格上重复

javascript angularjs twitter-bootstrap

Javascript ng在引导选项卡内容/选项卡窗格上重复,javascript,angularjs,twitter-bootstrap,Javascript,Angularjs,Twitter Bootstrap,我无法在页面加载时正确显示选项卡内容。我拥有一个名为apiList的对象工厂，然后我使用两个ng重复，一个命中apiList中的每个对象，然后下一个遍历该对象并将其所有数据放在页面上。我使用#tab{{$index}}在按钮和选项卡窗格之间保持数据切换对齐问题似乎在于如何使用我的选项卡窗格上的活动属性到目前为止，我有三个已知的测试用例我只能使用中的条件ng class=“{'active'：$index==0}”从第一个对象获取信息。。如果我从行中删除条件，则不会显示任何内容如果

我无法在页面加载时正确显示选项卡内容。我拥有一个名为

apiList

的对象工厂，然后我使用两个

ng重复

，一个命中apiList中的每个对象，然后下一个遍历该对象并将其所有数据放在页面上。我使用

#tab{{$index}}

在按钮和选项卡窗格之间保持数据切换对齐

问题似乎在于如何使用我的

选项卡窗格

上的

活动

属性

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

我只能使用中的条件

ng class=“{'active'：$index==0}”

从第一个对象获取信息。。

如果我从行中删除条件，则不会显示任何内容

如果我只是将

active

添加到窗格值（无条件）（即，

它们都会出现。

因此，我的问题似乎是如何在ng重复时打开/关闭我的active，而我只是迷路了

此外，单击帐户/客户不会更新选项卡。它们都具有与选项卡窗格相关的正确数据切换ID（0和1），因此我认为这是

活动的一部分。每当我单击选项卡窗格时，它们都会很好地展开
这是我的工厂，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重复（仅右侧选项卡）

{{api.uri}}（在新选项卡中打开）
{{method.name}
{{method.desc}}

下面的代码是我最初使用的代码，在尝试进一步压缩之前
<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>


{{api.uri}}
（在新选项卡中打开）
{{method.name}
{{method.desc}}
{{api.uri}}（在新选项卡中打开）
{{method.name}
{{method.desc}}
没有错误，一切正常！我在同一页上使用我的旧代码作为基本大纲，并将旧代码设置为style=“display:hidden”
，但这仍然意味着ID是DOM的一部分，因此我无法正确更改选项卡（重复/冲突ID）.请用您的解决方案回答问题，或者删除问题。我们不在此处解决问题。@j08691您有什么建议，我不介意删除，但如果投赞成票的人只是好奇或者也有问题。对不起！：（那很好。你可以像其他人一样将你的解决方案作为答案发布。你也可以接受它（但你得不到分数）。
<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>