css - ionic 条件文本颜色

Question

如果一个人在场或不在场，我想为他的名字显示不同的颜色。 在 ionic 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>

而且它以任何方式都不起作用 有什么建议吗

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 演示

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>