Question

所以我想要做的是一个表格，这是由于它的长度显示在多个页面上。为了实现这一点，我在一个html页面上使用了不同的div's beeing。

我正在使用angularJS和Bootstrap这段代码： 我如何加载此代码并不重要。它不是index.html文件中的第一件事，也不是作为带有angularJS的模板加载的。

<div ng-controller="uploadCtrl">
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" data-target="#part1">Start</a></li>
            <li><a data-toggle="tab" data-target="#part2">Step 2</a></li>
            <li><a data-toggle="tab" data-target="#part3">Finish</a></li>
        </ul>

        <div class="tab-content">
            <div id="part1" class="tab-pane fade in active">
                <h3>Form part 1</h3>
                <p>Some content.</p>
            </div>
            <div id="part2" class="tab-pane fade">
                <h3>Form part 2</h3>
                <p>Some content in menu 1.</p>
            </div>
            <div id="part3" class="tab-pane fade">
                <h3>Form part 3</h3>
                <p>Some content in menu 2.</p>
            </div>
        </div>
    </div>

我的问题是我只能点击导航中的链接一次。 class="active"的切换功能似乎存在问题。单击链接会添加活动类，但永远不会删除它。

点击每个链接后，它们都是这样的：<li><a data-toggle="tab" data-target="#part1" class="active" aria-expanded="true">Form part 1</a></li>

在第一次链接选择后，我的<li>都不是class="active"。

我只使用

jquery.min.js
bootstrap.min.js
bootstrap.min.css
npm.min.js
angular.min.js

Answer 1

我强烈建议您使用angular-ui bootstrap。它有嵌套表单的特殊情况。使用已经提供DOM操作的bootstrap.js超过angular有点多余，可能会导致意外行为。

<form name="outerForm" class="tab-form-demo">
    <uib-tabset active="activeForm">
      <uib-tab index="0" heading="Form Tab">
        <ng-form name="nestedForm">
          <div class="form-group">
            <label>Name</label>
            <input type="text" class="form-control" required ng-model="model.name"/>
          </div>
        </ng-form>
      </uib-tab>
      <uib-tab index="1" heading="Tab One">
        Some Tab Content
      </uib-tab>
      <uib-tab index="2" heading="Tab Two">
        More Tab Content
      </uib-tab>
    </uib-tabset>
  </form>

更多信息here

Answer 2

我的图书馆似乎有问题。

我切换到Bootstrap 版本3.3.6 ，它运行得很好。之前我使用过标准下载选项提供的Bootstraps主页中的当前版本4.0.0 。

使用Bootstrap“nav”，“data-toggle”和angularJS切换div

2 个答案: