通过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-style，请参阅文档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"};
});