угловой переключатель с вкладкой с помощью ui.bootstrap

Я установил две кнопки для переключения на другие две вкладки при нажатии, но она не работает.угловой переключатель с вкладкой с помощью 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

угловой переключатель с вкладкой с помощью ui.bootstrap

ответ

Смежные вопросы