Angular ng-class need help setting up

Question

Alright so I am trying to get my css background to change colors based on ng-class value of true or false but I don't know if I am doing this right.

<div id="home">

Summoner

         <div id="information" ng-repeat="match in matches | limitTo: 10">
        <img ng-src="http://ddragon.leagueoflegends.com/cdn/6.9.1/img/champion/{{ champions[match.championId]}}.png"  />
        <img ng-src="http://ddragon.leagueoflegends.com/cdn/6.9.1/img/item/{{match.stats.item0}}.png"/>
        <img ng-src="http://ddragon.leagueoflegends.com/cdn/6.9.1/img/item/{{match.stats.item1}}.png"/>
        <img ng-src="http://ddragon.leagueoflegends.com/cdn/6.9.1/img/item/{{match.stats.item2}}.png"/>
        <img ng-src="http://ddragon.leagueoflegends.com/cdn/6.9.1/img/item/{{match.stats.item3}}.png"/>
        <img ng-src="http://ddragon.leagueoflegends.com/cdn/6.9.1/img/item/{{match.stats.item4}}.png"/>
        <img ng-src="http://ddragon.leagueoflegends.com/cdn/6.9.1/img/item/{{match.stats.item5}}.png"/>
        <img ng-src="http://ddragon.leagueoflegends.com/cdn/6.9.1/img/item/{{match.stats.item6}}.png"/>
             <span ng-class ="{{match.stats.win}}">
             <p>{{champions[match.championId]}}</p>
             <p>{{match.subType}}</p>
             <p>{{match.lane}}</p>
             <p>{{match.stats.championsKilled}} Kills </p>
             <p>{{match.stats.numDeaths}} Deaths </p>
             <p>{{match.stats.assists}} Assists </p>
             </span>


        </div>

</form>

Answer 1

You don't assign true/false to ng-class itself, you assign classes based on expressions.

Assuming match.stats.win evaluates to true/false, here's how you can assign a conditional class using ng-class:

<span ng-class="{'winBg': match.stats.win, 'loseBg': !match.stats.win}">

This would assign the class winBg when match.stats.win evaluates to true, and classloseBg when it evaluates to false.

And then you can define your winBg and loseBg classes in your css, e.g.:

.winBg
{
    background-color: green;
}
.loseBg
{
    background-color: red;
}