angularjs 使用 ui.bootstrap 切换选项卡视图 [英] angularjs switch tab view using ui.bootstrap
问题描述
我已经设置了两个按钮,可以在点击时切换到另外两个标签页,但它不起作用.
这里是html代码:
<uib-tabset class="tabbable"><uib-tab header="my tab 0" ng-attr-active="tabs[0].active"><div class="row"><a class="btn btn-wide btn-azure" ng-click="go_tab1()">转到选项卡 1</a><a class="btn btn-wide btn-azure" ng-click="go_tab2()">转到选项卡 2</a></uib-tab><uib-tab header="my tab 1" ng-attr-active="tabs[1].active"><div class="row">
</uib-tab><uib-tab header="my tab 2" ng-attr-active="tabs[2].active"><div class="row">
</uib-tab></uib-tabset>
这是控制器:
$scope.tabs = [{active: true}, {active: false}, {active: false}];$scope.go_tab1 = 函数(){$scope.tabs[1].active = true;};$scope.go_tab2 = 函数(){$scope.tabs[2].active = true;};
如果添加正确的库,它会正常工作
<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 = 函数(){$scope.tabs[1].active = true;};$scope.go_tab2 = 函数(){$scope.tabs[2].active = true;};});
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="样式表"><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 header="my tab 0" ng-attr-active="tabs[0].active"><div class="row"><a class="btn btn-wide btn-azure" ng-click="go_tab1()">转到选项卡 1</a><a class="btn btn-wide btn-azure" ng-click="go_tab2()">转到选项卡 2</a>
</uib-tab><uib-tab header="my tab 1" ng-attr-active="tabs[1].active"><div class="row">
</uib-tab><uib-tab header="my tab 2" ng-attr-active="tabs[2].active"><div class="row">