1

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

3 に答える 3

3

AngularJS の UI ブートストラップを確認してください: http://angular-ui.github.io/bootstrap/

すべての Bootstrap UI 要素のディレクティブが含まれています。

これらをアプリに配置して登録すると、次のようなタブを定義できます。<tab></tab>

詳細については、ドキュメントを確認してください。

于 2013-07-14T05:17:05.837 に答える
1

ブートストラップ タブを読み込むには JavaScript が必要です

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

各タブを個別にアクティブ化する必要があります

于 2013-07-14T05:09:53.233 に答える
0

ul 要素に ID を指定し、スクリプト ファイルでタブ メソッドを呼び出します。
デモ 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');
  });
于 2013-07-14T05:24:46.383 に答える