CODEWITHSUNDEEP
htmlcssangularjsionic-framework
Gene
Gene

Reputation: 2218

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>

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!

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>

Controller:

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

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!

Update 2: Using SSH answers, i modified to the following:

Html:

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

Controller:

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

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

Upvotes: 2

Views: 3888

Answers (1)

SSH
SSH

Reputation: 2553

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

Upvotes: 2

Related Questions