0

lo que quiero hacer es mostrar la palabra aprobado en verde y no aprobado en rojo.

mi codigo es:

<div ng-if="data.student_status=='Aprobado'">
<b class="verde" ng-show="{{data.student_status}}"></b>
</div>

<div ng-if="data.student_status=='No Aprobado'">
<b class="rojo" ng-show="{{data.student_status}}"></b>
</div>

Controller

$scope.params = $state.params;
$scope.imagesfolder = config.urlBase+'images';
$scope.students = "";
$http.get(config.urlBase+'json/data_students')
.success(function(data, status, headers,config){
console.log('Data students success');
$scope.data = data.students[$state.params.id];
$scope.students= data.students;
$ionicLoading.hide();
})

.error(function(data, status, headers,config){
console.log('Data students error');
$ionicLoading.show();
})

2 respuestas 2

1

Buenas,

No entiendo bien que haces en el controlador, con el response del la petición $http, pero te date un ejemplo del html y SASS :

SCSS:

.estudiantes {
   .aprobado {color: #00A600};
   .reprobado {color: #FF0000};
 }

HTML:

<div class="estudiantes" ng-repeat = "estudiante in data" >
   <h4 ng-class="{'aprobado': data.student_status === "Aprobado", 'reprobado': data.student_status === "Reprobado"}">
       {{data.student_status}}
  </h4> 
</div>

Ojala te sirva, saludos, sino usas SASS es casi igual que CSS, pero te da muchas ventajas, te recomiendo aprenderlo, cuando lo usas ya no dejas de usarlo.

Saludos.

0

Solucion

<b ng-class="{'verde': data.student_status === 'Aprobado', 'rojo': data.student_status === 'No Aprobado'}">{{data.student_status}}</b>
2
  • 2
    Me alegra que encontraras solucion. pero te recomiendo que formules la respuesta como si fuera otro quien la hubiera respondido. Con explicacion detallada de qué tenia mal en la pregunta y cómo la respuesta funciona. Un saludo ^^ (en 48h puedes aceptar la respuesta)
    – lois6b
    Commented el 4 abr. 2017 a las 8:09
  • Acepta cuando puedas tu propia solución para que pueda servir en un futuro a otros.
    – Findelias
    Commented el 6 abr. 2017 a las 6: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.