1

Quiero hacer que dependiendo del estado en el que esté el estadoActo el contenido de dicho campo aparezca de un color u otro.

Los estados serían Celebrado -> Color Verde, Pendiente -> Color Amarillo y Suspendido -> Color Rojo.

Un ejemplo sería como el de la imagen más abajo mostrada, aunque no corresponde el color del contenido con el tipo de estado (solo es un ejemplo).

Mi código HTML es:

<tr ng-repeat="s in expediente.sesiones | orderBy:'fecha'">
                <td class="col-md-2">{{ s.fecha | date : 'dd/MM/yyyy'}}</td>
                <td class="col-md-2">{{ s.horaInicio | date: 'HH:mm'}}</td>
                <td class="col-md-2">{{ s.horaFinal | date: 'HH:mm'}}</td>
                <td class="col-md-1">{{ s.duracion }} min</td>
                <td class="col-md-2">{{ s.estadoActo }}</td>
                <td class="col-md-2">{{ expediente.sede.nombre}}</td>
                </td>
              </tr>

Para realizar esto estoy utilizando:

ng-class="{'badge fondo-verde' : (s.estadoActo='Celebrado'),'badge fondo-amarillo' : (s.estadoActo='Pendiente'),'badge fondo-rojo' : (s.estadoActo='Suspendido')}"

Pero no sé si valdría. ¿Alguna posible solución?

Además, estoy ordenando mi tabla por orden de fecha, ¿sería correcto?

Imagen de ejemplo de algo parecido a mi resultado

4
  • ¿Qué tipo de resalte deseas? ¿Es bootstrap lo que estás usando? ¿Es angularJS (1.x) o Angular 5? el 21 may. 2019 a las 7:23
  • Sé que es Angular, pero no sé si un modelo u otro, porque soy nuevo en este lenguaje.
    – jose
    el 21 may. 2019 a las 7:34
  • Comparte algo de código de javascript y así podré identificarlo. Mientras te redactaré código de Angular.js, que creo que es lo más probable que uses por las pistas de la pregunta. el 21 may. 2019 a las 7:36
  • Ya tienes mi respuesta, espero que sea lo que esperabas y que solucione tu problema. Ten en cuenta que es una aplicación Angular.js, por lo que editaré tu pregunta para reflejar las etiquetas correctas. el 21 may. 2019 a las 7:56

1 respuesta 1

1

Básicamente el problema que estás sufriendo es debido a que estás usando un operador de asignación (=) en vez del operador de comparación (==) en la asignación de clases ng-class.

Debes cambiar cada asignación:

'badge fondo-verde': s.estadoActo = 'Celebrado'

A una comparación como la siguiente:

'badge fondo-verde': s.estadoActo == 'Celebrado'

Aquí tienes un ejemplo de tu código funcionando correctamente:

/* Reproduzco datos de ejemplo */
let expediente = {
  sede: { nombre: 'Sede' },
  sesiones: [
    { id: 1, fecha: '2019-02-12', horaInicio: '15:30', duracion: 30, estadoActo: 'Celebrado' },
    { id: 2, fecha: '2019-03-06', horaInicio: '21:00', duracion: 60, estadoActo: 'Pendiente' },
    { id: 3, fecha: '2019-04-18', horaInicio: '08:00', duracion: 120, estadoActo: 'Celebrado' },
    { id: 4, fecha: '2019-05-14', horaInicio: '09:30', duracion: 90, estadoActo: 'Suspendido' },
  ],
};

angular.module('pruebasApp', [])
  .controller('pruebasCtrl', ['$scope', function($scope) {
    /* Cargo los datos definidos previamente */
    $scope.expediente = expediente;
  }]);
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.fondo-verde {
  background-color: green;
}
.fondo-amarillo {
  background-color: yellow;
}
.fondo-rojo {
  background-color: red;
}
</style>

<div class="container" ng-app="pruebasApp" ng-controller="pruebasCtrl">
  <div ng-repeat="s in expediente.sesiones | orderBy: 'fecha'" class="row">
    <div class="col-2 text-center">{{ s.fecha | date: 'dd/MM/yyyy' }}</div>
    <div class="col-2 text-center">{{ s.horaInicio | date: 'HH:mm' }}</div>
    <div class="col-1 text-center">{{ s.horaFinal | date: 'HH:mm' }}</div>
    <div class="col-2 text-center">{{ s.duracion }} min</div>
    <div class="col-3 text-center">
      <button type="button" class="btn badge" ng-class="{
        'fondo-verde': s.estadoActo == 'Celebrado',
        'fondo-amarillo': s.estadoActo == 'Pendiente',
        'fondo-rojo': s.estadoActo == 'Suspendido'
      }">
        {{ s.estadoActo }}
      </button>
    </div>
    <div class="col-2 text-center">{{ expediente.sede.nombre }}</div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js" integrity="sha256-23hi0Ag650tclABdGCdMNSjxvikytyQ44vYGo9HyOrU=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

2
  • 1
    Perfecto, esto es lo que buscaba. Muchisimas gracias!!
    – jose
    el 21 may. 2019 a las 8:09
  • ¡Un placer! :D Recuerda marcar la respuesta como correcta para dar por cerrada la pregunta :) el 21 may. 2019 a las 8:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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