angular-ui-tabset/index.html at master · jackyu/angular-ui-tabset · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<html lang="en" ng-app="app">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Angular UI tabsets challenge</title>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    <script src="assets/scripts/tabs.js"></script>
    <script src="assets/scripts/app.js"></script>

    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="assets/css/app.css" rel="stylesheet">
</head>

<body ng-controller="MainCtrl">

  <div class="container content">

    <!-- 動態建立 tab -->
    <form role="form" class="add-container">
      <div class="form-group">
        <label for="tabTitleInput">請輸入標籤名稱:</label>
        <input type="text" class="form-control" id="tabTitleInput" ng-model="tab.title">
      </div>
      <div class="form-group">
        <label for="tabContentInput">請輸入標籤內容</label>
        <input type="text" class="form-control" id="tabContentInput" ng-model="tab.content">
      </div>

      <div class="pull-right">
        <button type="button" class="btn btn-primary" ng-click="add()">加入</button>
      </div>
    </form>


    <div class="options-container">
      <div class="checkbox">
        <label>
          <input type="checkbox" ng-model="removed" ng-change="changeRemove()"> 允許刪除 tab
        </label>
      </div>
    </div>


    <!-- Tab 結果顯示 -->
    <tabset removed="removed">
      <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
        {{tab.content}}
      </tab>
    </tabset>

  </div>

</body>

</html>