angularjs 使用 ui.bootstrap 切换选项卡视图 [英] angularjs switch tab view using ui.bootstrap

查看：21
本文介绍了angularjs 使用 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">

</uib-tab></uib-tabset>

I have set up two buttons to switch to other two tabs on click, but it is not working.

here is the html code:

<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>

here is the controller:

$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;
};

解决方案

It will work fine if you add the correct libraries 

<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>

and injecting the ui.bootstrap dependency.

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>

这篇关于angularjs 使用 ui.bootstrap 切换选项卡视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆