javascript - Angular ng-class 需要帮助设置

Question

好吧，所以我试图让我的 css 背景根据 ng-class 值 true 或 false 改变颜色，但我不知道我这样做是否正确。

<div id="home">

召唤师

         <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

您不会为 ng-class 本身分配 true/false，而是根据表达式分配类。

假设 match.stats.win 的计算结果为 true/false，以下是如何使用 ng-class 分配条件类:

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

当 match.stats.win 计算结果为 true 时，这将分配类 winBg，当计算结果为 false 时，将分配类loseBg。

然后您可以在 css 中定义 winBg 和 loseBg 类，例如:

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