角度Ng-如果Ng样式未更改表格字体颜色 [英] Angular Ng-If Ng-Style not changing the table font colour

问题描述

我有以下代码，它是一个离子列表，用于填充检索到的数据.我正在尝试根据状态响应将其颜色编码为不同的颜色.

I have the following code which is an ionic list which populates the data retrieved. Im trying to colour code it into different colours based on the Status reponse.

<ion-list>
  <ion-item ng-repeat="test in tests" class ="item-text-wrap" style="height:40%">

    <a href="#/tab/test/test-detail/{{test.ID}}">
    <div style="width:80%; float:left;">

    <table>
    <span ng-if="test.Status == 'Cleared'" ng-style="color:green">
    <tr>
        <td> <strong>Remark: </strong></td>
        <td style="padding:3px">{{test.Remark}}</td>
    </tr>
    <tr>
        <td><strong>Status:</strong></td>
        <td style="padding:3px">{{test.Status}}</td>
    </tr>
        </span>
    </table>

</div>
</ion-item>
</ion-list>

但是表格数据的颜色仍然没有改变.可能是什么问题呢?我是否错误地使用了ng-if和ng-style?谢谢！

But the colour of the table data still does not change. What could be the problem? Am i using the ng-if and ng-style wrongly? Thanks!

更新1:使用@SSH提供的见解，我使用以下代码更新了控制器:

Update 1: Using the insights provided by @SSH, i updated my controller with the following codes:

HTML:

<ion-list>
  <ion-item ng-repeat="test in tests" class ="item-text-wrap" style="height:40%">

    <a href="#/tab/test/test-detail/{{test.ID}}">
    <div style="width:80%; float:left;">

    <table>
    <span ng-style="calculateStyle()">
    <tr>
        <td> <strong>Remark: </strong></td>
        <td style="padding:3px">{{test.Remark}}</td>
    </tr>
    <tr>
        <td><strong>Status:</strong></td>
        <td style="padding:3px">{{test.Status}}</td>
    </tr>
        </span>
    </table>

</div>
</ion-item>
</ion-list>

控制器:

 $scope.calculateStyle = function() {
      var style={}
      console.log('test3: '+$scope.tests.Status);
      console.log('test6: '+$scope.Status);
      if ($scope.Status == 'Cleared') {
      style.color='green';
      console.log('Viola');
    }
    else{
      console.log('GG');
    }
      return style;
  }
})

但是在控制器中返回的结果仍然为null/undefined. test3和test6返回我未定义"，而If语句返回我"GG".可能是什么问题呢?谢谢！

But the result returned in the controllers are still null/undefined. test3 and test6 returned me 'undefined' while the If statement returned me 'GG'. What could be the problem? Thanks!

更新2:使用SSH答案，我修改为以下内容:

HTML:

<span ng-style="calculateStyle(test)">

控制器:

$scope.calculateStyle = function(test) {
    var style={}
    if (test.Status == 'Cleared') style.color='green';
    return style;
}

但是控制器上的测试变量仍未定义.使用$ scope.test也不起作用.可能是什么问题?

But the test variable at the controller is still undefined. Using $scope.test doesn't work too. What could be the problem?

推荐答案

是的，您确实使用了错误.您需要传递一个由样式名称和条件组成的对象:

Yes you do use it wrongly. You need to pass an object consisting of style names and conditions:

<span ng-style="{color:(test.Status == 'Cleared')?'green'}">

或更好地使用控制器中的函数来计算和返回样式对象，以保持模板干净:

or better use a function in your controller to calculate and return style object, to keep your template clean:

<span ng-style="calculateStyle(test)">

然后在您的控制器定义中

and then in your controller definition

$scope.calculateStyle = function(test) {
    var style={}
    if (test.Status == 'Cleared') style.color='green';
    return style;
}

这篇关于角度Ng-如果Ng样式未更改表格字体颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！