0

Estoy intentando hacer que un botón se active cuando le de click, estoy haciendo uso de la directiva ng-class de angularJs, por defecto viene activado el botón de IMAGENES con un background-color: red; que trae la clase active, pero cuando le vuelvo a dar click a ese botón IMAGENES, se activa el siguiente botón, como puedo solucionar esto.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $scope.isActive = false;
    $scope.countImage360 = 1;

    $scope.activeButton = function() {
        $scope.isActive = !$scope.isActive;
    };
});
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <script src="script.js"></script>
        <style>
            .col-sm-12 label {
                background-color: blue;
                color: #fff;
                width: 120px;
            }
            .col-sm-12 label.active {
                background-color: red;
                color: #fff;
                width: 120px;
            }
        </style>
    </head>

    <body ng-app="myApp" ng-controller="myCtrl">
        <div class="col-sm-12 col-md-12">
            <label class="btn" ng-class="{'active': isActive}" ng-click="activeButton()" ng-if="countImage360 > 0">Recorrido 360</label>
            <label class="btn" ng-class="{'active': !isActive}" ng-click="activeButton()">Imagenes</label>
        </div>
    </body>

</html>

3 respuestas 3

1

para evitar que la función se ejecute dos veces para un mismo botón, debes pasar por parametro a la función el valor que tiene establecido en ese momento de la siguiente forma:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $scope.isActive = false;
    $scope.countImage360 = 1;

    $scope.activeButton = function(alreadyActive) {
        if (alreadyActive) {
            $scope.isActive = !$scope.isActive;
        }
    };
});
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <script src="script.js"></script>
        <style>
            .col-sm-12 label {
                background-color: blue;
                color: #fff;
                width: 120px;
            }
            .col-sm-12 label.active {
                background-color: red;
                color: #fff;
                width: 120px;
            }
        </style>
    </head>

    <body ng-app="myApp" ng-controller="myCtrl">
        <div class="col-sm-12 col-md-12">
            <label class="btn" ng-class="{'active': isActive}" ng-click="activeButton(!isActive)" ng-if="countImage360 > 0">Recorrido 360</label>
            <label class="btn" ng-class="{'active': !isActive}" ng-click="activeButton(isActive)">Imagenes</label>
        </div>
    </body>

</html>

1

Deberías enviar como parámetro algún identificador de cada control que necesites para poder diferenciarlo; algo como esto

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $scope.actives = { images: false, other: true }
    $scope.countImage360 = 1;

    $scope.activeButton = function(ctrl) {
        for (var i in $scope.actives) {
            $scope.actives[i] = false;
        }
        $scope.actives[ctrl] = true;
    };
    
    $scope.$watch('countImage360', function(newValue, oldValue){
      if(newValue != undefined){
        $scope.actives = {
          images: newValue > 0 ? false : true,
          other: newValue > 0 ? true : false
        }
      }
    })
});
.col-sm-12 label {
  background-color: blue;
  color: #fff;
  width: 120px;
}
.col-sm-12 label.active {
  background-color: red;
  color: #fff;
  width: 120px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-sm-12 col-md-12" ng-app="myApp" ng-controller="myCtrl" ng-cloak>
  <label style="background-color:transparent; color:black">countImage360</label>
  <input type="text" class="form-control col-md-2" ng-model="countImage360">
  <br>
  <label class="btn" ng-class="{'active': actives.other}" ng-click="activeButton('other')" ng-if="countImage360 > 0">Recorrido 360</label>
  <label class="btn" ng-class="{'active': actives.images}" ng-click="activeButton('images')">Imagenes</label> 
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>

PD: Si revisas el código te percatarás que utilizo un $watch; esto es relativo dependiendo de tus necesidades. Yo lo uso para mostrarte en tiempo real que al cambiar el valor de countImage360 a través del input se refleja el cambio

Nos comentas colega

7
  • Existe alguna forma mas facil de hacerlo?
    – zerokira
    el 6 sep. 2018 a las 21:37
  • Es que si quieres usar una función para manejar el comportamiento de varios elementos debes poder identificarlos; lo otro sería crear una función para CADA label (activeButton1() , activeButton2()) pero creo que concuerdas en que es una solución poco óptima =/ el 6 sep. 2018 a las 21:40
  • quiero ver si hacen alguna otra respuesta.
    – zerokira
    el 7 sep. 2018 a las 12:49
  • Totalmente! También podría servirme si hay alguna respuesta más efectiva... Saludos Colega! el 7 sep. 2018 a las 12:54
  • 1
    Tu respuesta me ha sido útil y me has dado una idea de como hacerlo, lo implemente de una manera diferente y menos código, responderé yo mismo la pregunta.
    – zerokira
    el 7 sep. 2018 a las 15:26
0

Esta es la solución a mi pregunta, investigando un poco de como hacer el trabajo lo mejor posible.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $scope.isActive = true;
    $scope.countImage360 = 1;

    $scope.activeButton = function(ctrl) {
        $scope.isActive = ctrl == 'other' ? true : false;
    };
});
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <script src="script.js"></script>
        <style>
            .col-sm-12 label {
                background-color: blue;
                color: #fff;
                width: 120px;
            }
            .col-sm-12 label.active {
                background-color: red;
                color: #fff;
                width: 120px;
            }
        </style>
    </head>

    <body ng-app="myApp" ng-controller="myCtrl">
        <div class="col-sm-12 col-md-12">
            <label class="btn" ng-class="{'active': isActive}" ng-click="activeButton('other')" ng-if="countImage360 > 0">Recorrido 360</label>
            <label class="btn" ng-class="{'active': !isActive}" ng-click="activeButton('images')" ng-init="isActive = countImage360 > 0 ? true : false">Imagenes</label>
        </div>
    </body>

</html>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.