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

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

您可以使用提供正确颜色的功能：

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

将员工传递给它变得很方便。如果你想添加更多的类，你可以在你的控制器中修改你的功能。

您还可以添加多个班级。在返回时用空格隔开它们。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

离子条件文本颜色

2 个答案: