Currently, I am developing an application using Ionic and AngularJS. In this project, I am using ng-repeat to populate the results and want to display different colors based on certain criteria.
Initially, I managed to achieve this using inline ng-style coding for one specific criterion:
<table ng-style="{color:(test.Status == 'Cleared')?'green' : 'red'}">
Although this method works perfectly fine, it becomes impractical when I need to set multiple criteria like time and others.
Therefore, I attempted to move this functionality to the controller using the following approach:
<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(test)">
<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>
</a>
</ion-item>
</ion-list>
Inside my controller class:
.controller('Ctrl', function($scope, $http, $cordovaSQLite, dataFactory, StoreService) {
....
$scope.calculateStyle = function(test) {
var style={}
if (test.Status == 'Cleared') {
style.color='green';
console.log('Success');
}
else{
console.log('Error');
}
return style;
}
It's important to note that the 'tests' data is retrieved from a JSON web service and consists of multiple objects, hence the use of ng-repeat to loop through each test object for color coding purposes.
However, I encountered an error message:
Uncaught SyntaxError: Unexpected token test
at the line:
$scope.calculateStyle = function(test)
If I pass an integer or string to calculateStyle('Test') or calculateStyle(123), it works fine. The issue arises only when passing 'test' as an argument. Any suggestions on how to resolve this problem?
I also attempted to replace it with '$scope' but without success. What could be causing this issue?
Thank you!