[SOLUCIONADO] función para boton

[lamenenchu]

Muy buenas. Necesito una ayudita... Resulta que tengo un botón, el cual quiero que cambie según el estado de un cliente (corresponde a una columna de mi bbdd).
Es decir, tengo una columna con estado 0,1 y 2. Pues según si el cliente es 0, el botón debería ser de color rojo. Si es 1, debería ser amarillo, y si es 2 verde.

Ahora mismo el botón es de color gris y solo muestra el numero al que corresponde cada cliente. (en pantalla tengo 5 botones, uno por fila, pq muestra una serie de datos de la base de datos. Y al hacer click sobre ellos cambiar al siguiente estado. (del 0 al 1, del 1 al 2 y del 2 al 0).

Código:

<button type="button" class="btn" ng-click="cambiarEstado()">{{cliente.estado}}</button>

y ya con el javascript me pierdo. Hice una probatina cambiando la clase del botón, pero claro, entonces al hacer click se me cambiaban todos los botones a la vez .

Código:

$scope.states = ['Pendiente', 'En Curso', 'Finalizado'];
   
    $scope.btn0 = {
        state: $scope.states[0]
    };
    
    var i = 1;
    $scope.cambiarEstado = function(){
      $scope.btn0.state = $scope.states[i%3];
       i++;
  }----------------------------------------------------------
<button type="button" class="btn" ng-class="{'btn-finish':btn0.state == 'Finalizado','btn-wait':btn0.state == 'Pendiente','btn-curso':btn0.state == 'En Curso'}" 
         ng-model="btn0" 
         ng-click="cambiarEstado()">{{btn0.state}}</button>

Muchas gracias

[carlillos]

Con angular no sé si sea diferente pero en javascript simple puedes mandar la referencia al botón en que ejecuta la función:

Código HTML:

<button type="button" class="btn" onclick="cambiarEstado(this)">{{cliente.estado}}</button>
 
<script>
function cambiarEstado(boton) {
    boton.style.backgroundColor = "red";    
}
</script>
 

En ese caso sólo cambia el fondo del botón en el que se hizo clic.

[lamenenchu]

Iniciado por carlillos

Con angular no sé si sea diferente pero en javascript simple puedes mandar la referencia al botón en que ejecuta la función:

Código HTML:

<button type="button" class="btn" onclick="cambiarEstado(this)">{{cliente.estado}}</button>
 
<script>
function cambiarEstado(boton) {
    boton.style.backgroundColor = "red";    
}
</script>
 

En ese caso sólo cambia el fondo del botón en el que se hizo clic.

Bueno, la verdad que ya he conseguido mostrar el botón correspondiente a cada estado..., con una simple directiva de angular...
la cosa es que ahora me gustaría tener una función por la que si hago click en ese botón que me muestra ahora por pantalla, cambie al estado 2. Y al hacer click sobre ese boton con estado 2, me muestre el estado 3 y del 3 al uno... y así sucesivamente... pero ya he intentado varias funciones sin éxito. Se te ocurre alguna idea?

También me podría servir, que al hacer click se abriera un pop-up editable en la misma pantalla, pero ahí ya me pierdo total.

Graciassss

[lamenenchu]

He conseguido que me cambie al hacer click los estados, aunque no los colores. Pero al llegar al final del array ya no puedo volver a la posición 0, es decir, que se para el cambio de estados, y al llegar a 'En curso', como ha llegado al final del array ya no repite. Como podría repetir?

$scope.cambiarEstado = function(){

if( $scope.estate[0] === 'Finalizado'){
$scope.estate[0] = 'Pendiente';
i++;
}
else if ($scope.estate[0] === 'Pendiente'){
$scope.estate[0] = 'En curso';
}else $scope.estate[0] = 'En curso';

}

[lamenenchu]

A lo cutre salchichero he conseguido que los botones al ser clicados siempre cambien de estado. El problema es que me cambian todos a la vez. Es como si al hacer click la función moviera los 3 botones a la vez.

if( $scope.estate[0] === 'Pendiente'){
$scope.estate[0] = 'En Curso';
$scope.estate[1] = 'Finalizado';
$scope.estate[2] = 'Pendiente';

}
else if ($scope.estate[0] === 'En Curso'){
$scope.estate[0] = 'Finalizado';
$scope.estate[1] = 'Pendiente';
$scope.estate[2] = 'En curso';

} else if ($scope.estate[0] === 'Finalizado'){
$scope.estate[0] = 'Pendiente';
$scope.estate[1] = 'En curso';
$scope.estate[2] = 'Finalizado';

}


Pero de ahí no paso... Yo quiero que al hacer click se cambien de manera independiente...

[lamenenchu]

Buenas de nuevo... la cosa ha mejorado...

Código:

for(var i in $scope.usuario){
     if($scope.usuario[i].estado === '0'){
         $scope.usuario[i].estado = '1';
        
     }
     else if($scope.usuario[i].estado === '1'){
         $scope.usuario[i].estado = '2';        
            
     }
     
      else if($scope.usuario[i].estado === '2'){
          $scope.usuario[i].estado = '0';
      }
      return $scope.usuario[i].estado;
 
 }

Pero ahora haga click en el botón que sea, me cambia los estados del mismo botón… Me explico... Tengo 4 botones:
-Si hago click en el primero... me cambia los estados del segundo (cuando debería cambiarme los del primero), pero de manera individual, ya no lo hace en bloque.

-Si hago click en el segundo, me cambia los estados del segundo... BIEN!

-Si clico el tercero me cambia los del segundo. Y lo mismo con el 4º.

Qué solución tengo?