更新时间: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>