CODEWITHSUNDEEP
javascripthtmlangularjs
Michael Meritt
Michael Meritt

Reputation: 393

Conditionally format/style inside ng-repeat

I am trying to come up with a manner to conditionally format (a simple background color) for an html table with results from an AngularJS controller. This would hopefully take place during the iterations of ng-repeat as it works through the elements in an array.

What I would like to accomplish is: whenever a function inside the controller returns true, the background or style is green, and when it is not it will be red.

LOOK FOR "BEGIN QUESTION" in a comment for the insertion point.

        <!-- PLAYER STATS TABLE -->
    <div id = "StatsListTable">
    <table border="1" style="width:80%">
    <tr> <!-- TODO: class="tr.pstats" -->
        <th>Character Name</th>
        <th>    
            <div ng-app="KIdash" ng-controller="controller">
            Total Matches: {{TotalMatchesFunc()}} :: {{GreaterWins()}}
            </div>
        </th>
        <th class="green">Wins</th>
        <th class="red">Losses</th>
    </tr>
        <tr ng-repeat="ps in PlayerStats" class = "playerStatTable">
            <td>{{ps.name}}</td>
            <td>{{ps.matches}}</td>

            <!-- BEGIN QUESTION -->
            <!-- IF  {{GreaterWins()}}  make it green -->
            <!-- ELSE                   make it red   -->
            <script type="text/javascript">
            function() {
                if( controller.GreaterWins() )
                {
                    <th class="green">{{ps.wins}}</th>
                } else {
                    <th class="red">{{ps.wins}}</th>
                }
            }
            </script>
            <!-- END IF -->
            <td>{{ps.losses}}</td>
        </tr>
    <table>
    </div>
    <!-- END PLAYER STATS TABLE -->

Upvotes: 0

Views: 94

Answers (1)

Narain Mittal
Narain Mittal

Reputation: 1160

You can do this by ng-class. Something like below:

<tr ng-repeat="ps in PlayerStats" class = "playerStatTable">
      <td>{{ps.name}}</td>
      <td>{{ps.matches}}</td>
      <td ng-class="{'green': GreaterWins(),'red': !GreaterWins() }">{{ps.wins}}</td>                
      <td>{{ps.losses}}</td>
</tr>

Upvotes: 2

Related Questions