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>