Activar botón con ng-class AngularJs

publicado por: Anonymous

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.

_x000D_

_x000D_

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

_x000D_

<!DOCTYPE html>_x000D_
<html>_x000D_
_x000D_
    <head>_x000D_
        <meta charset="utf-8" />_x000D_
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>_x000D_
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">_x000D_
        <script src="script.js"></script>_x000D_
        <style>_x000D_
            .col-sm-12 label {_x000D_
                background-color: blue;_x000D_
                color: #fff;_x000D_
                width: 120px;_x000D_
            }_x000D_
            .col-sm-12 label.active {_x000D_
                background-color: red;_x000D_
                color: #fff;_x000D_
                width: 120px;_x000D_
            }_x000D_
        </style>_x000D_
    </head>_x000D_
_x000D_
    <body ng-app="myApp" ng-controller="myCtrl">_x000D_
        <div class="col-sm-12 col-md-12">_x000D_
            <label class="btn" ng-class="{'active': isActive}" ng-click="activeButton()" ng-if="countImage360 > 0">Recorrido 360</label>_x000D_
            <label class="btn" ng-class="{'active': !isActive}" ng-click="activeButton()">Imagenes</label>_x000D_
        </div>_x000D_
    </body>_x000D_
_x000D_
</html>

_x000D_

_x000D_

_x000D_

solución

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:

_x000D_

_x000D_

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

_x000D_

<!DOCTYPE html>_x000D_
<html>_x000D_
_x000D_
    <head>_x000D_
        <meta charset="utf-8" />_x000D_
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>_x000D_
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">_x000D_
        <script src="script.js"></script>_x000D_
        <style>_x000D_
            .col-sm-12 label {_x000D_
                background-color: blue;_x000D_
                color: #fff;_x000D_
                width: 120px;_x000D_
            }_x000D_
            .col-sm-12 label.active {_x000D_
                background-color: red;_x000D_
                color: #fff;_x000D_
                width: 120px;_x000D_
            }_x000D_
        </style>_x000D_
    </head>_x000D_
_x000D_
    <body ng-app="myApp" ng-controller="myCtrl">_x000D_
        <div class="col-sm-12 col-md-12">_x000D_
            <label class="btn" ng-class="{'active': isActive}" ng-click="activeButton(!isActive)" ng-if="countImage360 > 0">Recorrido 360</label>_x000D_
            <label class="btn" ng-class="{'active': !isActive}" ng-click="activeButton(isActive)">Imagenes</label>_x000D_
        </div>_x000D_
    </body>_x000D_
_x000D_
</html>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *