通过Angular更改离子图标的颜色

Question

我正在尝试更改离子图标的颜色。 像在线（绿色），空闲（琥珀色）和离线（灰色）一样。 所以基本上我是通过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数据，我想更改颜色。 数据仅在页面加载时出现。 数据并非一直刷新。 因此，只有我需要在页面加载期间立即更改颜色。

Answer 1

您应该基于$ http回调设置变量，然后将相应的样式应用到ng-style。 有关ng样式，请参见此处的文档。

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