Página UI Angular-separe o conteúdo da página e o cabeçalho da página
eu enfrentei um problema durante a tentativa de usar o plugin UIB-tabset, Ok esse plugin funcionando corretamente, mas eu preciso usá-lo em algo específico. Pergunta: Como posso separar o cabeçalho das páginas do conteúdo das páginas.
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function ($scope, $window) { $scope.setActiveTab = function(index){
$scope.activeTab = index;
}
});
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div ng-app="ui.bootstrap.demo">
<div ng-controller="TabsDemoCtrl">
<div class="some-tabs-header-holder">
<uib-tabset active="active" vertical="false" >
<uib-tab index="0" heading="Tab 1"><!-- not needed tab 1 content--></uib-tab>
<uib-tab index="1" heading="Tab 2"><!-- not needed tab 2 content--></uib-tab>
</uib-tabset>
<div>
<div class="the-tabs-content-holder">
<div id="tab1" class="tab1-content">tab 1 content</div>
<div id="tab2" class="tab2-content">tab 2 content</div>
</div>
</div>
</div>
só preciso de mostrar o conteúdo do div "the-tabs-content-holder" quando a página estiver seleccionada
1
Author: Mihai Alexandru-Ionut, 2017-10-13
2 answers
Você pode fazê-lo anexando select
manipulador de eventos para cada página e usar ng-if
directiva a fim de mostrar o conteúdo tab
com base no valor de $scope.activeTab
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function ($scope, $window) {
$scope.activeTab=1;
$scope.setActiveTab = function(index){
$scope.activeTab = index;
}
});
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div ng-app="ui.bootstrap.demo">
<div ng-controller="TabsDemoCtrl">
<div class="some-tabs-header-holder">
<uib-tabset active="active" vertical="false" >
<uib-tab select="setActiveTab(1)" index="0" heading="Tab 1"><!-- not needed tab 1 content--></uib-tab>
<uib-tab select="setActiveTab(2)" index="1" heading="Tab 2"><!-- not needed tab 2 content--></uib-tab>
</uib-tabset>
<div>
<div class="the-tabs-content-holder">
<div id="tab1" ng-if="activeTab==1" class="tab1-content">tab 1 content</div>
<div id="tab2" ng-if="activeTab==2" class="tab2-content">tab 2 content</div>
</div>
</div>
</div>
4
Author: Mihai Alexandru-Ionut, 2017-10-13 08:58:14
- Defina o
index
da página seleccionada comng-click="setActiveTab(0)"
. - mostra o div do conteúdo da página com base no valor de
$scope.activeTab
Usandong-if
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function($scope, $window) {
$scope.activeTab = 0;
$scope.setActiveTab = function(index) {
$scope.activeTab = index;
}
});
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div ng-app="ui.bootstrap.demo">
<div ng-controller="TabsDemoCtrl">
<div class="some-tabs-header-holder">
<uib-tabset active="active" vertical="false">
<uib-tab index="0" heading="Tab 1" ng-click="setActiveTab(0)">
<!-- not needed tab 1 content-->
</uib-tab>
<uib-tab index="1" heading="Tab 2" ng-click="setActiveTab(1)">
<!-- not needed tab 2 content-->
</uib-tab>
</uib-tabset>
<div>
<div class="the-tabs-content-holder">
<div id="tab1" class="tab1-content" ng-if="activeTab == 0">tab 1 content</div>
<div id="tab2" class="tab2-content" ng-if="activeTab == 1">tab 2 content</div>
</div>
</div>
</div>
1
Author: Sajal, 2017-10-13 08:51:04