Вложенные вкладки Angularjs связываются с JSON

Question

Использование angularjs 1.3.4 и ui-bootstrap-tpls 0.13.4 и начальной загрузки 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 , которая была создана с единственной целью использования материала Bootstrap в Angular без требования полной инфраструктуры jQuery.

2) Поскольку ваш JSONданные слабо структурированы, вы не можете использовать стандартную директиву ng-repeat="object in collection".Вместо этого вам нужно использовать ng-repeat="(key, value) in collection".

Используя ваш пример, вот как вы должны использовать директиву tabset UIB для создания вложенного пользовательского интерфейса вкладки из вашего 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>

Answer 2

Попробуйте

1002 *