Question

使用angularjs 1.3.4和ui-bootstrap-tpls 0.13.4和bootstrap 3 CSS

我有一个json如下：

  "MasterTab1": {
    "tab1": [
      "somedata1",
      "somedata2"
    ],
    "tab2": [
      "somedata1",
      "somedata2"
    ]
  },
  "MasterTab2": {
    "tab1": [
      "somedata1",
      "somedata2"      
    ],
    "tab2": [
      "somedata1",
      "somedata2"  
    ],
     "tab3": [
     "somedata1",
      "somedata2"  
    ]
  }
}

从json上方开始（忽略某些数据，因为其在标签内使用），我要创建标签如下：

MasterTab1        MasterTab2
tab1  tab2         tab1 tab2 tab3

因此，基本上，两个选项卡MasterTab1，MasterTab2始终会存在。但是它们下方的子标签可能存在也可能不存在，并且可以有任意数量。因此，当他们单击MasterTab1时，我要显示相关的选项卡tab1和tab2。当他们单击MasterTab2时，我要显示相关的选项卡tab1，tab2和tab3。

以前我没有父子选项卡，所以使用类似这样的方式来显示选项卡：

  <tabset>
    <tab ng-repeat="tabs in myTabsData"></tab>
 </tabset>

  myService.getTabData().then(function (res) {
    $scope.myTabsData = res;
 });

但是现在我不确定如何创建此嵌套选项卡结构。希望有人能帮忙

Answer 1

在这里耦合事物：

1）不要将Bootstrap UI与Angular一起使用。它需要jQuery，它是DOM操纵框架，就像AngularJS是DOM操纵框架一样。试图将两者同时使用是造成挫败感的秘诀。而是使用特定于AngularJS的Angular-UI-Bootstrap库，该库的唯一目的是在Angular中使用Bootstrap内容，而无需完整的jQuery框架。

2）由于JSON数据结构松散，因此无法使用标准的ng-repeat="object in collection"指令。相反，您需要使用ng-repeat="(key, value) in collection"。

使用示例，这是如何使用UIB tabset指令从JSON创建嵌套的Tab UI：

angular.module('app', ['ui.bootstrap'])
  .controller('ctrl', function() {
    this.tabs = {
      "MasterTab1": {
        "tab1": ["somedata1-1", "somedata1-2"],
        "tab2": ["somedata2-1", "somedata2-2"]
      },
      "MasterTab2": {
        "tab1": ["somedata2-1-1", "somedata2-1-2"],
        "tab2": ["somedata2-2-1", "somedata2-2-2"],
        "tab3": ["somedata2-3-1", "somedata2-3-2"]
      }
    };
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" />
<div ng-app="app" ng-controller="ctrl as $ctrl">
  <uib-tabset>
    <uib-tab ng-repeat="(key,value) in $ctrl.tabs" heading="{{ key }}">
      <uib-tabset>
        <uib-tab ng-repeat="(k2,v2) in value" heading="{{ k2 }}">
          {{ v2 }}
        </uib-tab>
      </uib-tabset>
    </uib-tab>
  </uib-tabset>
</div>

Answer 2

尝试一下

<tabset ng-repeat="tabs in myTabsData">
 <tabset ng-repeat="tab in tabs>
  <tab>{{tab}}</tab>
 </tabset>
</tabset>

AngularJS嵌套选项卡绑定到json

2 个答案: