AngularJS (15) UI Bootstrap

本篇範例的(Plunker Demo)

大致上，Bootstrap這個網頁框架只支援JQUERY。不過現在，AngularJS 團隊做了網頁框架Bootstrap的擴件，UI Bootstrap，用AngularJS取代了

1. bootstrap.js
2. jquery.js

所以，當你想要使用UI Bootstrap的元素時，你只需要匯入bootstrap.css、Angular.js、和ui-bootstrap.js。

<!-- bootstrap.css  -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Angular.js  -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js"></script>
<!-- ui-bootstrap.js  -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.js"></script>

標籤集(tabset)

{{tt.content}}

程式碼

<div ng-app="app15">
   <div class="container" ng-controller="MyController">
      <tabset>
         <!-- 頁面 -->
         <tab ng-repeat="tt in tabs" heading="{{tt.title}}">
            {{tt.content}}
        </tab>
      </tabset>
</div>

JS

var app = angular.module('myModule', ['ui.bootstrap']);

app.controller("MyController", ['$scope', function($scope){
  $scope.tabs = [{
    title:'國語',
    content:'美美美美'
  },{
    title:'閩語',
    content:'媠媠媠媠閩'
  },{
    title:'客語',
    content:'靚靚靚靚客'
  },{
    title:'原住民語',
    content:'媠媠媠媠原'
  }];  
  
}]);