且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

AngularJS嵌套选项卡绑定到JSON

更新时间:2023-01-17 08:26:34

在此处结合:

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>