Codelife Codelife - 5 months ago 11
JSON Question

Select the color of row based on end point JSON value using AngularJS

I have a program written in AngularJS, which lists the values coming from end point in rows. I want to give color of rows based on a JSON value. Angularjs plnkr link :-

http://plnkr.co/edit/X8L5WwbIVWNzjoLxoHTg?p=preview

JSON structure :-

{
"1": {
"venture": "XYZ Informatics",
"member": [
{
"name": "abcd",
"email": "abcd@gmail.com"
}
],
"message": "This is good day",
"isclicked": true
},
"2": {
"venture": "BBC Informatics",
"member": [
{
"name": "xyz",
"email": "xyz@gmail.com"
}
],
"message": "This is bad day",
"isclicked": false
}
}


Output will show :-

XYZ Informatics
BBC Informatics


I want to give green color of row if
"isclicked": true
and red color when
"isclicked": false


As an example
XYZ Informatics
row color should be green and
BBC Informatics
in red.

Answer

Add a function like the following for retrieving the color:

  $scope.getColor = function(el) {
        if (!el.isclicked) {
          return {'color': 'red'};
        } else {
          return {'color': 'green'};
        }
      };

in this way it's possible to assign the color on the html in this way:

      <tr ng-repeat="data in datas">
        <td ng-style="getColor(data)">{{ data.venture }}</td>
      </tr>

Updated example: http://plnkr.co/edit/Y2rSF1h372vYQZzG4FPN?p=preview

Comments