离子条件文本颜色

Question

我想为一个人的名字显示不同的颜色（如果他在场或不在场）。在离子视图中工作

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

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

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

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