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

您不将 true/false 分配给 ng-class 本身，而是根据表达式分配 classes。

假设 match.stats.win 的计算结果为 true/false，下面是使用 ng-class:

分配条件 class 的方法

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

这将在 match.stats.win 计算结果为真时分配 class winBg，在计算结果为假时分配 classloseBg。

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

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

Angular ng-class 需要帮助设置

Angular ng-class need help setting up

javascript

angularjs

ng-class

召唤师