Question

我正在使用带有Angular ng-repeat的Bootstrap选项卡。但是，当我点击任何标签时，它都没有打开

<div id="content">
    <div class="wrap full">
<div ng-init="names = [{name:'one'}, {name:'two'}, {name:'three'}, {name:'four'}, {name:'five'}]">
    <ul class="nav nav-tabs">
    <li ng-repeat="name in names" ng-class="{active: $index == 0}">
      <a href="#tab{{$index + 1}}" data-toggle="tab">Week {{$index + 1}}</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade in" id="tab{{$index + 1}}" ng-repeat="name in names" >
      <p>{{$index + 1}}</p>
    </div>
  </div>
</div>
</div>
</div>

Answer 1

查看AngularJS的UI Bootstrap：http://angular-ui.github.io/bootstrap/

它包含所有Bootstrap UI元素的指令。

在您的应用中放置并注册这些标签可让您定义以下标签：<tab></tab>

查看文档以获取更多信息。

Answer 2

Bootstrap选项卡需要javascript才能加载它们

$('#myTab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
});

每个标签需要单独激活

Answer 3

为ul元素提供id，然后在脚本文件中调用tab方法。
演示的 http://plnkr.co/edit/w0URah6KiiXrSwaRCxcJ?p=preview
HTML：

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link data-require="bootstrap-css@*" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
    <script data-require="angular.js@1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="bootstrap@2.3.2" data-semver="2.3.2" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="appController">
    <h1>Hello Plunker!</h1>
    <div id="content">
      <div class="wrap full">
        <div ng-init="names = [{name:'one'}, {name:'two'}, {name:'three'}, {name:'four'}, {name:'five'}]">
          <ul class="nav nav-tabs" id="mytab">
            <li ng-repeat="name in names">
              <a href="#tab{{$index + 1}}" data-toggle="tab">Week {{$index + 1}}</a>
            </li>
          </ul>
          <div class="tab-content">
            <div class="tab-pane fade in" id="tab{{$index + 1}}" ng-repeat="name in names">
              <p>{{$index + 1}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>

</html>

脚本文件

var app = angular.module('app', []);
app.controller('appController', function($scope){
   $('#mytab').tab('show');
  });

Twitter Bootstrap和Angular.js-动态添加标签和标签内容，但它不起作用

3 个答案: