CODEWITHSUNDEEP
cssangularjs
Roxx
Roxx

Reputation: 3986

Change ionic icon color by Angular

I am trying to change ionic icon color. Like online (green), Idle (amber) and offline (Gray). So basically I am fetching the data by http request and it is working fine. It is showing the correct data but I am not able to show the online status.

<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>

This is the icon <i class="icon icon ion-person"></i> which color i want to change.

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

based upon the last_seen data i would like to change the color. Data only comes at page load. Data is not refreshing all the time. So, only I need to change the color at once during page load.

Upvotes: 0

Views: 2428

Answers (1)

Boldizsar
Boldizsar

Reputation: 703

You should set a variable based on your $http callback and then apply the corresponding style with ng-style. See the documentation here for ng-style.

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

Upvotes: 2

Related Questions