изменение цвета иконок икона по угловому

Question

Я пытаюсь изменить цвет иконок. Как онлайн (зеленый), Idle (янтарный) и офлайн (серый). Так что в основном я получаю данные по запросу 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. См. Документацию here для 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"}; 
});