이온 아이콘 색상 변경 각도

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 스타일로 적용해야합니다. 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"}; 
});