Angularjs嵌套标签与JSON结合

Question

使用angularjs 1.3.4＆amp;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时，我想显示相关的Tabs Tab1＆amp;TAB2。当他们单击MasterTab2时，我想显示相关的Tabs Tab1，Tab2＆amp;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，这是一个圆顶操作框架，就像AngularJs是一个圆顶操纵框架一样。试图将两者一起使用是挫败感的秘诀。而是使用AngularJS特定的Angular-ui-bootstrap库，该库是为了在整个jQuery Framework上使用Angular中使用Bootstrap的唯一目的。

。

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>