How can I show concrete words in different colors in angular js

0

What I want to do is show the word approved in green and not approved in red.

my code is:

<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();
})
    
asked by anonfidusa 04.04.2017 в 09:48
source

2 answers

0

Solution

<b ng-class="{'verde': data.student_status === 'Aprobado', 'rojo': data.student_status === 'No Aprobado'}">{{data.student_status}}</b>
    
answered by 04.04.2017 / 10:01
source
1

Good morning,

I do not understand what you are doing in the controller, with the response of the $ http request, but give yourself an example of the html and 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>

I hope you serve, greetings, if you use SASS is almost the same as CSS, but it gives you many advantages, I recommend you learn it , when you use it you do not stop using it.

Greetings.

    
answered by 17.04.2017 в 21:11