Tengo la siguiente situación, 4 botones con diferentes rutas de vehículos, cuando le doy click a un botón se agrega una clase active
y muestra el contenido que pertenece a esa ruta y adicional se agrega una clase bootstrap col-md-6
a la palabra contenido.
¿Cual es el problema?
Que cuando se le da click
a varios botones de rutas para activarlos la palabra contenido tiene un comportamiento diferente a lo esperado, se espera que si hay botones activos que la palabra contenido permanezca con la clase bootstrap col-md-6
y si no hay botones activos que permanezca con la clase bootstrap col-md-12
.
Tengo el siguiente código:
PD: ver en pantalla completa para ver el comportamiento, que sugieren?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Prueba</title>
<!-- CDN Bootstrap 4 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<style type="text/css">
.active {
background-color: red !important;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="container">
<div class="row">
<div class="col-md-3">
<button type="button" class="btn btn-primary" ng-class="{'active': showRutaBuses}" ng-click="toggleRutas('buses')">
Ruta buses
</button>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-primary" ng-class="{'active': showRutaBicicletas}" ng-click="toggleRutas('bicicletas')">
Ruta de bicicletas
</button>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-primary" ng-class="{'active': showRutaMotos}" ng-click="toggleRutas('motos')">
Ruta de Motos
</button>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-primary" ng-class="{'active': showRutaCarros}" ng-click="toggleRutas('carros')">
Ruta de carros
</button>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div ng-if="showRutaBuses">
<h1>Rutas de buses</h1>
<ul>
<li>
<a href="">Bus 1</a>
</li>
<li>
<a href="">Bus 2</a>
</li>
<li>
<a href="">Bus 3</a>
</li>
</ul>
</div>
<div ng-if="showRutaBicicletas">
<h1>Ruta de Bicicletas</h1>
<ul>
<li>
<a href="">Bicileta 1</a>
</li>
<li>
<a href="">Bicileta 2</a>
</li>
<li>
<a href="">Bicileta 3</a>
</li>
</ul>
</div>
<div ng-if="showRutaMotos">
<h1>Ruta de Moto</h1>
<ul>
<li>
<a href="">Moto 1</a>
</li>
<li>
<a href="">Moto 2</a>
</li>
<li>
<a href="">Moto 3</a>
</li>
</ul>
</div>
<div ng-if="showRutaCarros">
<h1>Ruta de Carros</h1>
<ul>
<li>
<a href="">Carro 1</a>
</li>
<li>
<a href="">Carro 2</a>
</li>
<li>
<a href="">Carro 3</a>
</li>
</ul>
</div>
</div>
<div ng-class="{'col-md-6': partContent, 'col-md-12': !partContent }">
<h1 class="text-danger">Contenido</h1>
</div>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.showRutaBuses = false;
$scope.showRutaBicicletas = false;
$scope.showRutaMotos = false;
$scope.showRutaCarros = false;
$scope.partContent = false;
$scope.toggleRutas = function(typeRuoute) {
if (typeRuoute == 'buses') {
$scope.showRutaBuses = !$scope.showRutaBuses;
$scope.partContent = !$scope.partContent;
}
if (typeRuoute == 'bicicletas') {
$scope.showRutaBicicletas = !$scope.showRutaBicicletas;
$scope.partContent = !$scope.partContent;
}
if (typeRuoute == 'motos') {
$scope.showRutaMotos = !$scope.showRutaMotos;
$scope.partContent = !$scope.partContent;
}
if (typeRuoute == 'carros') {
$scope.showRutaCarros = !$scope.showRutaCarros;
$scope.partContent = !$scope.partContent;
}
}
});
</script>
</body>
</html>