通过 Angular 更改离子图标颜色答案

【问题标题】：Change ionic icon color by Angular通过 Angular 更改离子图标颜色
【发布时间】：2018-09-14 05:48:37
【问题描述】：

我正在尝试更改离子图标颜色。比如在线（绿色）、空闲（琥珀色）和离线（灰色）。所以基本上我通过http请求获取数据并且它工作正常。它显示了正确的数据，但我无法显示在线状态。

<div class="col-md-12 col-sm-12 col-xs-12 trans">
      <div class="row">
        <div class="col-md-4 col-sm-4 col-xs-4  trans"><i class="icon icon ion-person"></i> <font color="3E35EE"> {{fname}} {{lname}}</font></div>
        <div class="col-md-4 col-sm-4 col-xs-4  trans"><i class="icon icon ion-location"></i> <font color="3E35EE"> {{city}}</font></div>
        <div class="col-md-4 col-sm-4 col-xs-4  trans"><i class="icon icon ion-cash"></i><font color="3E35EE"> Salary</font></div>
      </div>
  </div>

这是<i class="icon icon ion-person"></i>的图标我想换什么颜色。

$scope.fname = data.fname;
                            $scope.lname = data.lname;
                            $scope.mobile = data.mobile;
                            $scope.last_seen = data.last_seen;

根据 last_seen 数据我想改变颜色。数据仅在页面加载时出现。数据并非一直在刷新。因此，只有我需要在页面加载期间立即更改颜色。

【问题讨论】：

标签： css angularjs

【解决方案1】：

您应该根据您的 $http 回调设置一个变量，然后使用 ng-style 应用相应的样式。有关 ng 样式，请参阅文档 here。

<i class="icon icon ion-person" ng-style="myStyle"></i>
...

$scope.myStyle = {"color": "gray"};

$http({
    ...
}).then(function successCallback(response) {
    ...
    $scope.myStyle = {"color": "green"};
}, function errorCallback(response) {
    ...
    $scope.myStyle = {"color": "red"};
});

【讨论】：