ionic conditional text color

Question

I want to show different color for the name of a person if he is Present or Absent. working in ion view

<ion-view view-title="{{employee.firstName }}">
    <ion-content has-header="true" padding="true">
        <div ng-style="{{employee.tStatus}} === 'Present' ? {  color:'green' } : { color:'red'}"> {{employee.name }}</div>
    </ion-content>
</ion-view>

And its not working in any way Any recommendation please

Answer 1

HTML

<ion-view view-title="{{employee.firstName }}">
    <ion-content has-header="true" padding="true">
        <div ng-class="{'green':employee.tStatus == 'Present','color: red':employee.tStatus == 'Absent'}">{{employee.name }}
        </div>
    </ion-content>
</ion-view>

SO Demo

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.employee = {
    tStatus: 'Present',
    name: 'Sameed'
  }
});

.green {
  color: green;
}
.red {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-class="{'green':employee.tStatus == 'Present','color: red':employee.tStatus == 'Absent'}">{{employee.name }}
  </div>
</div>

Answer 2

You could use a function which gives the right color:

var app = angular.module('app', []);
app.controller('employeeCtrl', function($scope) {
  $scope.employee = {
     tStatus: 'Absent',
     name: 'Foo'
  };

  $scope.getColorClass = function(employee)
  {
     switch(employee.tStatus)
     {
        case 'Present':
          return "green";
        case 'Absent':
        default:
          return "red";
     }
  };
});

it becomes in handy to pass the emploee in to it. if you want to add more classes, you can just modify your function inside your controller.

you can also add multiple classes. separate them with a space while returning.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="app" ng-controller="employeeCtrl">
  <div ng-class="getColorClass(employee)">
    {{employee.name}}
  </div>
</div>

and in your css define the classes

.red {
   color: red;
}

.green {
   color: green;
}

var app = angular.module('app', []);
app.controller('employeeCtrl', function($scope) {
  $scope.employee = {};
  $scope.employee.tStatus = 'Absent';
  $scope.employee.name = "Foo";

  $scope.getColorClass = function(employee) {
    switch (employee.tStatus) {
      case 'Present':
        return "green";
      case 'Absent':
      default:
        return "red";
    }
  };


});

.red {
  color: red;
}
.green {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="app" ng-controller="employeeCtrl">
  <div ng-class="getColorClass(employee)">
    {{employee.name}}
  </div>
</div>