AngularJS嵌套选项卡绑定到JSON [英] Angularjs nested tabs bind to json

问题描述

使用angularjs 1.3.4&ui-bootstrap-tpls 0.13.4和bootstrap 3 css

Using angularjs 1.3.4 & ui-bootstrap-tpls 0.13.4 and bootstrap 3 css

我有一个json，如下所示:

I have a json as below:

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

从json上方开始(忽略某些数据，因为它在制表符内使用)，我想按以下方式创建制表符:

From above json(ignore somedata as its being used inside tabs) I want to create tabs as:

MasterTab1        MasterTab2
tab1  tab2         tab1 tab2 tab3

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

So basically the two tabs MasterTab1, MasterTab2 would always be there. But the child tabs under them may or may not be there and can be in any number. So when they click on MasterTab1 I want to show the relevant tabs tab1 & tab2. When they click on MasterTab2 I want to show relevant tabs tab1, tab2 & tab3.

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

Earlier I did not had parent child tabs so was using something like this to show tabs:

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

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

但是现在我不确定如何创建此嵌套选项卡结构.如果有人可以提供帮助，将不胜感激

But now I am not sure how to do create this nested tabs stucture. Would appreciate if someone can help

推荐答案

在此处结合:

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

1) Don't use Bootstrap UI with Angular. It requires jQuery which is a DOM-manipulation framework just like AngularJS is a DOM-manipulation framework. Trying to use both of those together is a recipe for frustration. Instead use the AngularJS specific Angular-UI-Bootstrap library that was created for the sole purpose of using Bootstrap stuff in Angular without the requirement on the full jQuery framework.

2)由于JSON数据结构松散，因此无法使用标准的 ng-repeat =集合中的对象" 指令.相反，您需要在集合中使用 ng-repeat =(key，value)" .

2) Since your JSON data is loosely structured you can't use the standard ng-repeat="object in collection" directive. Instead you need to use ng-repeat="(key, value) in collection".

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

Using your sample, here's how you would use the UIB tabset directive to create a nested tab UI from your JSON:

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>

这篇关于AngularJS嵌套选项卡绑定到JSON的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！