angularjs切换选项卡视图使用ui.bootstrap

我已经设置了两个按钮切换到其他两个选项卡点击，但它不工作。angularjs切换选项卡视图使用ui.bootstrap

这里是html代码：

<div ng-controller="TabCtrl"> 
    <uib-tabset class="tabbable"> 
     <uib-tab heading="my tab 0" ng-attr-active="tabs[0].active"> 
      <div class="row"> 

      <a class="btn btn-wide btn-azure" ng-click="go_tab1()"> 
      Go To tab 1 
      </a> 
      <a class="btn btn-wide btn-azure" ng-click="go_tab2()"> 
      Go To tab 2 
      </a> 
      </div> 
     </uib-tab> 
     <uib-tab heading="my tab 1" ng-attr-active="tabs[1].active"> 
      <div class="row"> 
      </div> 
     </uib-tab> 
     <uib-tab heading="my tab 2" ng-attr-active="tabs[2].active"> 
      <div class="row"> 
      </div> 
     </uib-tab> 
    </uib-tabset> 
</div>

这里是控制器：

$scope.tabs = [{active: true}, {active: false}, {active: false}]; 
$scope.go_tab1 = function() { 
    $scope.tabs[1].active = true; 
}; 
$scope.go_tab2 = function() { 
    $scope.tabs[2].active = true; 
};

来源

2016-12-24 cplus

应该工作正常，如果您要添加的正确库

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script> 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>

和注入ui.bootstrap依赖。

var app = angular.module('app', ['ui.bootstrap']);

var app = angular.module('app', ['ui.bootstrap']); 
 

 
app.controller('TabCtrl', function($scope) { 
 
    
 
$scope.tabs = [{active: true}, {active: false}, {active: false}]; 
 
$scope.go_tab1 = function() { 
 
    $scope.tabs[1].active = true; 
 
}; 
 
$scope.go_tab2 = function() { 
 
    $scope.tabs[2].active = true; 
 
}; 
 

 
});

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script> 
 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script> 
 
    <script src="app.js"></script> 
 

 
<body ng-app="app"> 
 
<div ng-controller="TabCtrl"> 
 

 
    <uib-tabset class="tabbable"> 
 
     <uib-tab heading="my tab 0" ng-attr-active="tabs[0].active"> 
 
      <div class="row"> 
 

 
      <a class="btn btn-wide btn-azure" ng-click="go_tab1()"> 
 
      Go To tab 1 
 
      </a> 
 
      <a class="btn btn-wide btn-azure" ng-click="go_tab2()"> 
 
      Go To tab 2 
 
      </a> 
 
      </div> 
 
     </uib-tab> 
 
     <uib-tab heading="my tab 1" ng-attr-active="tabs[1].active"> 
 
      <div class="row"> 
 
      </div> 
 
     </uib-tab> 
 
     <uib-tab heading="my tab 2" ng-attr-active="tabs[2].active"> 
 
      <div class="row"> 
 
      </div> 
 
     </uib-tab> 
 
    </uib-tabset> 
 
</div> 
 
</body>

来源

2016-12-24 13:06:12 Deep

angularjs切换选项卡视图使用ui.bootstrap

回答

相关问题