离子条件文本颜色

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

"=16=" "=22=" "=26=" "=24=" "=14=" "=10=" “=16=”、“=22=”和“=24=” "=18=" "=19=" "=11=" "=12=" "=13=" "=20=" "=20=" "=14="

Answer 2

您可以使用给出正确颜色的函数：

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";
     }
  };
});

把员工传进去就派上用场了。如果你想添加更多类，你可以在你的控制器中修改你的函数。

您还可以添加多个类。返回时用 space 将它们分开。

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

并在您的 css 中定义类

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

离子条件文本颜色

ionic conditional text color

css

angularjs

ionic