通过Angular

时间:2017-02-14 19:23:22

标签: css angularjs

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

1 个答案:

答案 0 :(得分:2)

您应该根据$ 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"};
});