我正在开发角度和引导应用程序。 请找到演示here
我有以下两个要求:
js code:
var myApp = angular.module('tabs', [ 'ui.bootstrap']);
myApp.controller('tabsctrl', function ($rootScope,$scope) {
$rootScope.tabName ='MyTab Name';
$rootScope.selectedDropDownValue="dummy";
alert("selected dropdown value : " + $rootScope.selectedDropDownValue);
$rootScope.tabValue="tab1Value";
$scope.applicationData = {};
$scope.activeModule = "Tab1";
$scope.programModules=[{"tabName":"Tab1","tabValue":"tab1Value"},{"tabName":"Tab2","tabValue":"tab2Value"}];
$scope.loadApplicationData = function(tabVal,tabName){
$rootScope.tabName =tabName;
alert("$rootScope.tabName :: "+$rootScope.tabName);
$rootScope.tabValue=tabVal;
$scope.activeModule = tabVal;
};
$scope.loadApplicationData($scope.activeModule,'Tab1');
});
myApp.controller('dropDownListCtrl',function Ctrl($rootScope,$scope) {
$scope.list_categories = {
data: [{
id: 'id1',
name: 'option1'
}, {
id: 'id2',
name: 'option2'
}]
};
$scope.list_category = 'id1';
});
html代码:
<div ng-controller="dropDownListCtrl">
<select id="sel" class="input-block-level" ng-model="list_category" ng-options="obj.id as obj.name for obj in list_categories.data">
</select>
<p>$scope.list_category: {{list_category}}<p>
</div>
<br><br>
<div ng-controller="tabsctrl">
<div class="top-tabs">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" >
<li role="presentation" class="{{ pg.tabValue == activeModule? 'active':''}}" ng-repeat="pg in programModules">
<a href="javascript:void(0)" ng-click="loadApplicationData(pg.tabValue,pg.tabName)" >{{pg.tabName}}</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tab1">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-primary">
<div class="panel-heading">
Tab1 data
</div>asdsa
</div>
</div><div></div>
<div role="tabpanel" class="tab-pane active" id="tab2">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-primary">
<div class="panel-heading">
Tab2 data
</div>asdsa
</div>
</div><div></div> </div>
</div>
任何建议都会有所帮助。