0

Buenas estoy haciendo un boton de reproducir y pausa para un reproductor de audio en angular js, ya hice la función para que cambie el valor del texto y el icono, necesito poder revertirlo para cuando haga click de vuelta, vuelvan a aparecer los valores anteriores. Buenas estoy haciendo un boton de reproducir y pausa para un reproductor de audio en angular js, ya hice la función para que cambie el valor del texto y el icono, necesito poder revertirlo para cuando haga click de vuelta, vuelvan a aparecer los valores anteriores.

var app = angular.module('audioApp',[])

app.controller('audioController',function($scope){




    //texto boton reproducir
    $scope.playText = "Reproducir";

    //imagen boton reproducir
    $scope.pauseBtn = 'img/ic_reproductor_play_normal.png';


    //función para cambiar la imagen y el texto del boton
    $scope.changeImg = function(){

                $scope.playText = "Pausar";

                $scope.pauseBtn = 'img/ic_reproductor_pausa_normal.png';



    }



    })
receptor{
    font: 110% Roboto;
    font-weight: 400;
    color: #f4f4f4;
    background: #f1f1f1;
    width: 100%;
}


.boton_reproducir{
    display:inline-flex;
    justify-content: center;
    align-items: center;
    font: 90% Roboto;
    font-weight: 500;
    border: transparent;
    width: 100%;
    cursor: pointer;
}



.div-boton-reproducir{
    width: 9rem;
}
<!DOCTYPE html>
<html ng-app="audioApp">
<head>
    <meta charset="UTF-8">
    <title>Audio Angular</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.min.js"></script>
    <script src="app.js"></script>
    <link rel="stylesheet" href="estilos.css"/>
</head>
<body>

    <div ng-controller="audioController">
        <div class="div-boton-reproducir">
            <div class="receptor">
                <button class="boton_reproducir" ng-click="changeImg()">
                    <img ng-src="{{pauseBtn}}"/>
                    <b>{{playText}}</b>
                </button>
            </div>
        </div>
    </div>




</body>
</html>

1 respuesta 1

0

Acá hay muchas formas de hacerlo creo que con que hagas en la función una pequeña condicional es suficiente.

var app = angular.module('audioApp',[])

app.controller('audioController',function($scope){
    // texto botón reproducir
    $scope.playText = "Reproducir";

    // imagen botón reproducir
    $scope.pauseBtn = 'img/ic_reproductor_play_normal.png';

    // función para cambiar la imagen y el texto del boton
    $scope.changeImg = function() {
        if($scope.playText == 'Reproducir') {
            // sí el playText dice "Reproducir" cambiamos a "Pausar"
            $scope.playText = "Pausar";
            $scope.pauseBtn = 'img/ic_reproductor_pausa_normal.png';
        } else if($scope.playText == 'Pausar') {
            // sí el playText dice "Pausar" cambiamos a "Reproducir"
            $scope.playText = "Reproducir";
            $scope.pauseBtn = 'img/ic_reproductor_play_normal.png';
        }
    }
})

Con eso cada vez que el botón sea "Reproducir" cuando des click va entrar al if() de Reproducir cambiando todo a "Pausar", luego si vuelves hacer click, volverás ejecutar la función y como esta vez dice "Pausar" vas a entrar al else if() de Pausar cambiándote a "Reproducir" todo.

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.